移动端响应式布局

Posted 2020-08-08 cshhs

    <script>
        var pixclPation = 1/window.devicePixelRation;
        document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+pixelRatio+‘,minimum-scale=‘+pixelRatio+‘,maximum-scale=‘+pixelRatio+‘" />‘);
    </script>

 1.通过设置缩放比例，让1px做1px的事情。这样就不会出现在不同屏幕时候，1px显示不是1px的情况。

 

var html = document.getElementsByName(‘html‘)[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth/16 + ‘px‘;

 2.设置em，这样根据字体来响应式布局

 

html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body{
    width: 100%;
    height: 100%;
    overflow: auto;
}

3.让body来控制页面的尺寸

 

a {
    //取消a标签手指按下时出现的黑色遮罩层
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
input{
    //解决ios下表单元素圆角的问题
    -webkit-appearance: normal;
}