移动端自适应rem布局

 

补充一个基本知识，不许笑，1rem等于HTML中设置的字体大小（px）

首先，HTML 的 head 部分中加入如下代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

 

    initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。值为 1.0 即原始尺寸。

 

　maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0，即原始尺寸。

 

　minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0，即原始尺寸。

 

　user-scalable：浏览者是否可以手动缩放，yes 或 no 。

 

 

然后，引入这段原生js代码

(function (doc, win) {

       var docEl = doc.documentElement,

//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。

           resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

           recalc = function () {

               var clientWidth = docEl.clientWidth;

               if (!clientWidth) {

                        return

                };

               if(clientWidth==375){

                   docEl.style.fontSize = '10px';

               }else{

                   docEl.style.fontSize = 10 * (clientWidth / 375) + 'px';

               }

           };

       if (!doc.addEventListener){

           return;

        } ;

       win.addEventListener(resizeEvt, recalc, false);

       doc.addEventListener('DOMContentLoaded', recalc, false);

   })(document, window);

 

这是rem布局的核心代码，这段代码的大意是：
如果页面的宽度等于了375px（iphone6/6s），那么页面中html的font-size恒为10px，此时1rem=10px,如果一个div宽度是200px,既可以设为20rem。否则，页面中html的font-size的大小为： 10 * (当前页面宽度 /375)

 

知识点拓展解析：

1.orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。

 

2.documentElement 属性以一个元素对象返回一个文档的文档元素。HTML 文档返回对象为HTML元素。

 

3.Document 对象,当浏览器载入 HTML 文档, 它就会成为 document 对象。

document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

 

4.事件DOMContentLoaded,当初始HTML文档被完全加载和解析时，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架完成加载。另一个不同的事件load应该仅用于检测一个完全加载的页面。

DOM文档加载的步骤为

1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。//DOMContentLoaded
5. 加载图片等外部文件。
6. 页面加载完毕。//load

在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。