rem是什么？

rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem

因为em是相对父级元素的原因没有得到推广。

rem自适应布局原理

自适应处理：使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果

兼容性： iOS6以上和android 2.1以上基本上覆盖所有流行的移动端。

一般情况在项目的最前面加载一段js来修改html的font-size，针对不同分辨率计算font-size，监听浏览器更改 html的font-size。

本质上一句话就是等比缩放。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Demo App</title>
  </head>
  <body>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
              resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
              recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 750) {
                  docEl.style.fontSize = '100px';
                } else {
                  docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
              };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
          })(document, window);
    </script>
  </body>
</html>

px to rem 预处理

可以使用 postcss-pxtorem 配合上webpack，把代码中的px编译成 rem无痛的完成向rem布局的转变。

Mark24

rem自适应布局

rem是什么？

rem自适应布局原理

px to rem 预处理

相关