Rem简单使用

一.使用原则：只有固定的宽度和高度才使用rem，其它的可以采用百分比布局

注意：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

二.原理：rem只和根标签html的font－size的数值有关，也就是说1 rem＝当前屏幕的html的font－size的大小，所以要想做的适配不同分辨率的屏幕，就要根据不同分辨率的屏幕来动态是在font－size的大小。就可以通过js 设置如1rem＝10px；核心代码如下：

<script>
    var fun = function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;

                //这里是假设在750px（iphone6）宽度设计稿的情况下，1rem = 10px；
                //可以根据实际需要修改
                docEl.style.fontSize = 10 * (clientWidth / 750) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    }
    fun(document, window);
</script>

三.举个�

（1）index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem测试使用</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>

 <div class="wrapper">
 </div>
<script>
    var fun = function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;

                //这里是假设在750px（iphone6）宽度设计稿的情况下，1rem = 10px；
                //可以根据实际需要修改
                docEl.style.fontSize = 10 * (clientWidth / 750) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    }
    fun(document, window);
</script>
</body>
</html>

（2）css

*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
a{
    text-decoration: none;
}
html{
    font-size: 10px;
}
img{
    vertical-align: middle;
}

.wrapper{
    width: 37.5rem;
    height: 37.5rem;
    background-color: red;
}

（3）当为iphone7的时候显示的效果：

Rem简单使用

当为iphone7plus ：

Rem简单使用

当为三星s5的时候显示效果如下：

Rem简单使用

可以发现，显示效果能够很好的适应不同的分辨率的屏幕～

相关推荐