rem 自适应

Posted 2020-08-11 最骚的就是你

　最近在写一个关于小说阅读的webApp，由于没有借用任何框架，所以很多底层的内容都需要自己去解决，幸好的是这次只是关于移动端的内容，还不至于去向着jquery的方向码代码。言归正传，前几天在处理底色切换的时候，由于需要做到自适应即盒子的高度随着盒子的宽度变化，各种找资料发现了3中比较典型的解决办法，具体请点下面链接：

　　　　　移动端布局：写一个自适应的正方形盒子

　　而也从这些解决办法中学习到了vw和vh的使用，从此就对vw和vh爱不释手了，想着现在反正写的是一个移动端的网页不需要去考虑神马兼容性吧，可是在昨晚悲催的通过UC浏览器真机测试，发现真有不兼容的。。

　　

　　不兼容只好去找替代品了啊，早就听说过rem的大名，确却没有真正的使用过，这次就让我们好好的了解一下吧！

Question One:rem是什么？

　　rem（font size of the root element）是指相对于根元素(即html)的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

Question Two:rem有神马优点？

　　rem能等比例适配所有屏幕。 rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子：

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

　　我把html设置成10px是为了方便我们计算，为什么6rem等于60px。如果这个时候我们的.btn的样式不变，我们再改变html的font-size的值，看看按钮发生上面变化:

html{
    font-size:40px;
}

　　上面的width，height变成了上面结果的两倍，我们只改变了html的font-size，但.btn样式的width,height的rem设置的属性不变的情况下就改变了按钮在web中的大小。

　　其实从上面两个案例中我们就可以计算出1px多少rem:

　　第一个例子：

　　　　120px = 6rem * 20px(根元素设置大值)

　　第二个例子：

　　　　240px = 6rem * 40px(根元素设置大值)

　　推算出：

　　　　10px = 1rem 在根元素（font-size = 10px的时候）；

　　　　20px = 1rem 在根元素（font-size = 20px的时候）；

　　　　40px = 1rem 在根元素（font-size = 40px的时候）；

　　在上面两个例子中我们发现第一个案例按钮是等比例放大到第二个按钮，html font-size的改变就会导致按钮的大小发生改变，我们并不需要改变先前给按钮设置的宽度和高度，其实这就是我们最想看到的。

Question Three:rem需要怎么用？

　　因为是要计算rem的值，所以我们前端在看到设计图量尺寸的时候会去计算下这个东西，需要花费一些时间，所以提供了Sass（不知道的自己去百度）和Less（不知道的自己去百度）相对变量的代码，

　　Sass相对变量地址：Sass相对变量

　　Less相对变量地址：Less相对变量

手机自适应代码：

viewport标签：

<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/>

javascript代码：

<script>
    !function (win) {

        function resize() {
            var domWidth = domEle.getBoundingClientRect().width;
            if (domWidth / v > 540) {
                domWidth = 540 * v;
            }
            win.rem = domWidth / 16;
            domEle.style.fontSize = win.rem + "px";
        }

        var v,
            initial_scale,
            timeCode,
            dom = win.document,
            domEle = dom.documentElement,
            viewport = dom.querySelector(\'meta[name="viewport"]\'),
            flexible = dom.querySelector(\'meta[name="flexible"]\');

        if (viewport){
            //viewport：<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/>

            var o = viewport.getAttribute("content").match(/initial\\-scale=(["\']?)([\\d\\.]+)\\1?/);

            if (o) {

                initial_scale = parseFloat(o[2]);
                v = parseInt(1 / initial_scale);
            }
        }
        else{
            if (flexible) {
                var o = flexible.getAttribute("content").match(/initial\\-dpr=(["\']?)([\\d\\.]+)\\1?/);
                if (o) {
                    v = parseFloat(o[2]);
                    initial_scale = parseFloat((1 / v).toFixed(2))
                }
            }
        }
        if (!v && !initial_scale) {
            var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));
            v = win.devicePixelRatio;
            v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v
        }
        //没有viewport标签的情况下
        if (domEle.setAttribute("data-dpr", v), !viewport) {
            if (viewport = dom.createElement("meta"),
                    viewport.setAttribute("name", "viewport"),
                    viewport.setAttribute("content", "initial-scale=" + initial_scale + 
                    ",maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + 
                    ",user-scalable=no"),
                    domEle.firstElementChild
            ) {
                domEle.firstElementChild.appendChild(viewport)
            } else {
                var m = dom.createElement("div");
                m.appendChild(viewport), dom.write(m.innerHTML)
            }
        }
        win.dpr = v;

        win.addEventListener("resize", function () {
            clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
        }, false);

        win.addEventListener("pageshow", function (b) {
            b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
        }, false);

        /* 完成后就把body的字体设置为12
         "complete" === dom.readyState ? 
            dom.body.style.fontSize = 12 * v + "px" 
            : dom.addEventListener("DOMContentLoaded", function() {
                dom.body.style.fontSize = 12 * v + "px"
         }, false);
         */
        resize();
    }(window);
</script>

Question Three:浏览器对rem的兼容性

　　支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。总体来说还是很不错的，rem的出现可以说是让我们的webPage和webApp如虎添翼。