rem布局的使用

rem是什么?
rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

优点

用一个东西肯定要知道它的好处，由于其他字体大小都是基于html的，所以在移动端做适配的时候，可以使用这样的方法

rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可；

这个布局，又兼容性的问题存在 ie9+，firefox、 chrome、safari、opera 这写主流浏览器都支持了

下面我说一下使用方式

把下面那串样式加在最外层里面（如果是使用vue的话，就加在index.html文件夹里面），这样子就能做到仅仅改变html的字体大小，让其他字体具有“响应式”啦。

@media only screen and (min-width: 320px){
  html {
    font-size: 62.5% !important;
  }
}
@media only screen and (min-width: 640px){
  html {
    font-size: 125% !important;
  }
}
@media only screen and (min-width: 750px){
  html {
    font-size: 150% !important;
  }
}
@media only screen and (min-width: 1242px){
  html {
    font-size: 187.5% !important;
  }
}

以上是css用媒介查询来判断也可以用js来处理

<script type="text/javascript">
    (function(doc, win) {
        var docEl = doc.documentElement,
        isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
        dpr = window.top === window.self ? dpr : 1,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        docEl.dataset.dpr = dpr;
        var recalc = function() {
        var width = docEl.clientWidth;
        if (width / dpr > 750) {
        width = 750 * dpr;
        }
        docEl.dataset.width = width
        docEl.dataset.percent = 100 * (width / 750);
        docEl.style.fontSize = 100 * (width / 750) + 'px';
        };
        recalc()
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        })(document, window);
    </script>

猜你喜欢