H5网页移动端屏幕适配(rem单位的使用)

1.动态设置viewport的scale

var scale = 1 / devicePixelRatio;

<meta name="viewport" content="width=device-width, initial-scale=1.0">

document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

 

2.动态计算html的font-size

var deviceWidth = document.documentElement.clientWidth;

deviceWidth = deviceWidth > 640?640:deviceWidth;//物理分辨率大于1280则访问PC端,pad即访问电脑版

document.documentElement.style.fontSize = deviceWidth / 10 + 'px';

3.布局的时候，各元素的css尺寸=设计稿标注尺寸(以750为准)/75 rem

sass文件中例子

@function pm($n) {

@return $n/75 *1+rem;

}

.content{

width:pm(750);

}

4.html的font-size额外补充的媒介查询（视实际情况来做补充）

 

最后将上述代码封装成函数调用

 

        function cssAdapter(){
            //1.动态设置viewport的scale
            var scale = 1 / devicePixelRatio;
            // <meta name="viewport" content="width=device-width, initial-scale=1.0">
            document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
            
            //2.动态计算html的font-size
            var deviceWidth = document.documentElement.clientWidth;
            deviceWidth = deviceWidth > 640?640:deviceWidth;//物理分辨率大于1280则访问PC端,pad即访问电脑版
            document.documentElement.style.fontSize = deviceWidth / 10 + 'px';
        };
        cssAdapter();