rem如何实现自适应布局的

摘要：rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应

rem是什么

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

为什么移动web使用rem

一套代码一个布局适用所有移动端

如何使用rem方案

• 在使用rem方案的时候，设计师设计尽量最大的页面效果图，例如720像素的基本可以适应所有的移动端的设备
• 整体布局默认是不设置宽度的，就直接让它100%，铺满整个屏幕就OK了
• 小布局都是rem为单位的，大于720像素的时候，没有变化，但是一旦小于720像素的时候，等比例的缩放，这点跟移动端不考虑放大，考虑缩小的原则是一致的
• 图片只设置width:100%,其余不用设置，自适应盒子的大小
• 文字依然以rem为单位，等比例的放大，缩小
• 所有的布局均使用flex布局来用,不再使用width百分比，float布局了

因为ui设计稿 标准的1倍图 以375px为标准 2倍图 为750px为标准； 为了找到规律 尽可能小的误差；所以写viewwidth= 750px*

rem 适配的 js 代码

<script>
         
        // 找到最大尺寸 720px 当大于720px 宽度  html的font-size 设置为100px,几乎兼容所有的大显示器
        // 考虑问题 屏幕缩小的时候，尺寸的问题  让html的font-size是一个动态的值，并且与视图窗口有关
        // 这样就实现了所有元素响应式 
    (function (window, document) {
        // 因为ui设计稿 标准的1倍图 以375px为标准 2倍图 为750px为标准；
        // 为了找到规律 尽可能小的误差；所以写viewwidth = 750px
      var viewWidth = 750;
      var pick = viewWidth / 100;
      var mode = "resize";
      function change() {
        var view = document.documentElement.clientWidth || window.innerWidth;
            // 如果视图窗口 宽度大于750px
        if (view >= 750) {
            // 那么设置html的font-size为100px
          document.getElementsByTagName("html")[0].style.fontSize = 100 + "px";
          return;
        }
        // 否则 设置 html的font-size 的动态值 = 视图窗口宽度 / 100px   
        document.getElementsByTagName("html")[0].style.fontSize =
          view / pick + "px";
      }
      window.addEventListener(mode, change, !1);
      window.document.addEventListener("DOMContentLoaded", change, !1);
    })(window, document);

</script>