1.盒子，图片等宽度设置首选百分比，次而选择rem，高度可以是固定值
2.字体可以不用rem，误差太大了，且不能满足任何屏幕下字体大小相同,所以建议标题类用rem，要求字体大小相同的部分还是用px；
3.遇到内容排列显示的布局，建议放弃float，可以直接使用display:inline-block。
4.慎用position属性；absolute会脱离文档流，relative则不会
5.如何解决盒子边框溢出？当你把元素宽度设为 width:100%时，有时可能会遇到元素的宽度超出了屏幕，这时可对元素加box-sizing:border-box属性，用来指定盒子大小包含边框和内边距
6.去除button在ios上的默认样式
-webkit-appearance: none; border-radius: 0;
7.不想让按钮touch时有蓝色的边框
outline:none;
8.去除webkit的滚动条
element::-webkit-scrollbar{
display: none;
}
9.遇到过一个问题就是，当手机端点击input弹出键盘，整个视窗的高度就会变为减去键盘的高度，页面底部样式会乱，当时解决方法是用js获取整个页面高度赋值给body，等于说在不同的设备下写死不同的body高度值，底部就不会乱了
$("body").css("height",parseInt($(".wrap").height())+parseInt($(".icon-main").height()));
10.如果想改变 placeholder里的文字，需要用c伪类
::-webkit-input-placeholder{
color:#ccc
}
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
//flexible中定义<html>font-size
var dpr = window.devicePixelRatio;
console.log(dpr)
var docEl = document.getElementsByTagName("html")[0];
var width = docEl.clientWidth;
console.log(width);
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';遇到的一些移动端关于css布局适配问题
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 【蝴蝶效应】 蝴蝶效应:上个世纪70年代，美国一个名叫洛伦兹的气象学家在解释空气系统理论时说，亚马逊雨林一只蝴蝶...
- 砍柴的本来不想搭理放羊的，因为他觉得“道不同不相为谋”，自己是靠勤劳、靠本事养活自己，而对方所做的只不过是牧童小儿...
