html5+css3中移动端布局页面自适应解决方案

自己迷惑这个移动端布局好久，始终搞不明白，为什么移动端的宽高等一些设置要和根元素的font-size值有关。
下面分享一些移动端布局的方法，
一直是跟着老师在写移动端的页面，用rem布局。
先引入一个js插件remScale.js
不知道csdn怎么上传文件，就把js代码复制在下面：自己保存一下，存到js文件里面即可，

// JavaScript Document
(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=720){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false); //绑定事件
        doc.addEventListener('DOMContentLoaded', recalc, false);
		
})(document, window);

写移动端页面时，把这个文件引入即可

这段代码的核心意思是：如果页面的宽度超过了720px，那么页面中html的font-size值恒为100px,否则的话，html中的font-size的大小为100*(当前的页面宽度/720)

我看百度上人家都是设置640px或750px，但是我们老师设置的是720px，经过实践证明，720px也可以用，没啥问题

对应手机屏幕来说，720px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。这里的px是css逻辑像素（在下面给大家补充什么是设备像素，逻辑像素，css像素）
设备像素是设备的固有属性，屏幕的设备分辨率是1920*1200（单位：设备像素）

逻辑像素也叫设备独立像素，与css像素一样是一种虚拟的像素，它是操作系统定义的一种像素单位，应用程序将逻辑像素告诉操作系统，操作系统再将逻辑像素转为设备像素。
可以通过操作系统的分辨率设置来改变设备独立像素的大小，但是在前端开发中可以当作定制，因为没人会闲着没事去频繁改变操作系统分辨率。

css像素是一个不确定的物理像素，它是根据它所在的机型设备而决定的。在css中使用的px都是指css像素，如width:200px.css像素的大小，很容易变化的。当我们**缩放页面的时候，元素的css像素数量不会改变，****改变的是每个css像素的大小，**也就是说width:200px的元素在缩放200%以后，宽度仍然是200像素，只不过每个css像素的宽度和高度变为原来的2倍。如果原来的元素宽度为200个设备独立像素，缩放后就变成400个设备独立像素了，但是css像素宽度始终是200

参考了：
响应式设计——理解设备像素、设备独立像素和css像素

设置font-size值的原因是：rem就是根元素（即html)的字体大小，html中所有标签样式只要是涉及到尺寸的（height,width,font-size,padding,margin等）都可以使用rem布局。
如果把html的font-size设为20px，前面所说rem就是html的字体大小，那么1rem就是20px。可以算出1px就是0.05rem.
那么宽60像素，高40像素的元素样式就可以设置为：
width:3rem;
height:2rem;
so,这样设置的话，要素宽55px，高37px，就得一点点计算了，是不是好麻烦。

所以：把font-size值设置为100px，是不是很爽。此时1rem=100px.
那么上面的宽55px，高37px就可以设置成
width:0.55rem;
height:0.37rem;
so，换算起来简单多了
为什么不一开始把html的font-size设为1px呢，这样换算起来也简单，答：浏览器一般都有最小字体限制，比如谷歌浏览器，最小中文字体就是12px，所以实际上没有办法让1rem=1px。）

参考了：手机端页面自适应解决方案—rem布局

最后再给大家说个vscode插件 easy less
直接把px转为less