遇到的一些移动端关于css布局适配问题

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';

推荐阅读更多精彩内容