移动端rem布局

手机页面——分辨率特别乱：

1.定宽320px——优点：简单，缺点：不能适应

2.百分比——优点：能适应各种分辨率，缺点：太麻烦

3.rem——优点：方便、适应各种分辨率（首先定义一个“根大小”html{font-size:20px;}）

 

rem ：看的是html的字体大小（先得定html的font-size）

html{font-size:20px;}

切图，基本的宽度用320

注意：只要使用了rem切图那就千万别用px，和em。

      rem——不能出现除了rem以外任何单位

root->em       root         html

 

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

initial:[ɪ'nɪʃəl]

device: [dɪ'vaɪs]

        viewport             视口

        width             设备的宽度 (device )

        initial-scale     初始化缩放比例

        user-scalable     用户缩放

 

---

当屏幕发生变化的时候（变大或变小），以320的屏幕为基准进行计算，屏幕的缩放比例大小，然后当window.onload和onresize的时候，重新给document的font-size赋值，从而达到适应屏幕变化的效果

 

99%的公司：3套页面、偷懒2套(PC、手机和pad)——效果特别差

通过后台判断进入哪套页面——跟前台无关

 

写法1：封闭空间的写法

(function(win,doc){
   win.onload=win.onresize=function(){
      doc.documentElement.style.fontSize = doc.documentElement.clientWidth*20/320+'px';
   };
})(window,document);

---

 

写法2：

window.onload=function(){
   document.documentElement.style.fontSize = document.documentElement.clientWidth/320*20+'px';
   window.onresize = function(){
      document.documentElement.style.fontSize = document.documentElement.clientWidth/320*20+'px';
   };
};