移动端rem适配方案

1.meta 设置

<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=no"/>

因为这样设置了，网页宽度才和设备宽度相同,才可以拿这个标准去限定范围
浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取,layout viewport 的宽度是大于浏览器可视区域的宽度的,比如980px;

visual viewport ,浏览器可视区域的大小 , 可以通过window.innerWidth 来获取;

ideal viewport，也就是第三个viewport——移动设备的理想viewport;

scale = ideal viewport / visual viewport = 1/dpr ;

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

公式表示就是：window.devicePixelRatio = 物理像素 / dips。

dips:device-independent pixels

设备独立像素，就是独立于设备之外的像素，也就是css像素。
查看更多
移动前端开发之viewport的深入理解
 移动端开发中，关于适配问题的一点总结(一)

2. js 设置

;(function () {

    var change ='orientationchange' in window ?'orientationchange' :'resize';

   function calculate() {

       var deviceWidth =document.documentElement.clientWidth;

        if (deviceWidth <241) {

           deviceWidth =240;

        }else if(deviceWidth <320){

            deviceWidth =320;

       }else if (deviceWidth >750) {

            deviceWidth =750;

        }

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

     };

     window.addEventListener('resize',calculate,false);

     calculate();

})();

2.1 js 细节

(a)

(function () {})();
;(function () {}());

立即执行函数,建立私有作用域，从而限制向全局作用域中添加过多的变量和函数

(b)

var change ='orientationchange' in window ?'orientationchange' :'resize';

看移动端是否支持orientationchange ，否则监听 rezise 事件。
orientationchange：设备旋转的时候，会触发这个事件
resize:监听窗口变化。

(c)

iphone5 屏幕分辨率宽是 320px, iphone6，7，8 屏幕分辨率宽是 375px

(d)

rem 是一个相对单位（root em，根em），使用rem为元素设定字体大小时，相对的是HTML根元素；

如果 <html style= "font-size:37.5px;"> , 此时，1rem = 37.5px;
document.documentElement.style.fontSize =deviceWidth /7.5 +'px';
如果设备宽是 750px，html 的 font-size 则为 100px;
1rem = 100px; 1px = 1/100 rem; 5px = 5/100rem;
也就是 7.5=设计稿尺寸/100；
css元素尺寸=设计稿元素尺寸/100；
一般情况下设计师给的PSD尺寸是750px,所以采用7.5；如果是640，采用6.4；
window.addEventListener(change,calculate,false); // 设备旋转时触发；
calculate(); // 刷新时触发

3.img图片和背景图片

虽然以上判断条件大概包含所有机型，但有些设备视口还是比较窄的；若是需要全屏的图片，width设置成100%，而不是给他固定值。

4. css元素设置

.carbox{

width:6.5rem;   /*设计图上元素宽为650px,除以100；*/

margin:0 auto;

padding:0.1rem 0 0 0.27rem;

}

关于移动端字体设置

移动端安卓和IOS 默认中文字体看起来是差不多的，而针对英文和数字的字体区别比较大；

而 Helvetica 两个系统都支持，可以这样设置

body{font-family:Helvetica;}

最后编辑于：2018.12.07 11:36:59