rem绝对自适应方案

rem

　　css3新增的rem是现在非常受欢迎的单位。看一下MDN上的说明：

　　这个单位代表根元素的 font-size 大小（例如 <html> 元素的font-size）。

　　使用这个单位可以创建完美的可扩展布局，只需根据页面大小去修改html的font-size，就能达到适配整个页面的目的。那么问题来了，如何使html的font-size自适应呢？

媒体查询

　　media的用法这里就不赘述，简单说明通过媒体查询修改html的font-size以达到页面自适应的目的。

　　　　html如下：

  <article class="container">

    <ol>

      <li>rem是相对于root元素(html)字体大小的一个单位。 eg:html默认font-size为16px  则1rem = 16px</li>

      <li>若元素以rem为单位去设置字体、宽高、边距等。则修改html字体大小就能达到所有元素一起等比例修改的效果</li>

      <li>所以要实现html字体在不同页面大小下自适应</li>

    </ol>

  </article>

　　　　css如下：

//媒体查询控制html字体大小

 @media (max-width:767px) {

    html{

      font-size: 14px;

    }

  }

  @media (min-width:768px) {

    html{

      font-size: 16px;

    }

  }

  @media (min-width:992px) {

    html{

      font-size: 20px;

    }

  }

//页面元素的简单样式

  .container{

    padding: 1rem;

  }

  li{

    font-size: 1rem;

  }

　　通过媒体查询，在不同大小区间的页面上，设置html的font-size都不一样；

　　页面宽度为700px时，html的字体大小为14px，此时 1rem = 14px ，li元素的字体大小就是14px，包裹的内边距也是14px；改变页面宽度为800px，html的字体大小为16px，此时 1rem = 16px ，li元素的字体大小变为16px，包裹的内边距也变为16px；

　　这种方式当然媒体查询划分的越细致，自适应越强，但是无法实现完全自适应，只是区间性的。

vw

　　vw代表的视口的 1/100 100vw代表的即是视口的宽度。使用它我们就可以实现html的font-size完全自适应了。

　　css如下：

  html{

    font-size: calc(16/768*100vw);   //以768时16px为标准进行缩放

  }

　　例子的768px为一个假设的标准值，一般设计稿的大小为标准，然后再进行适配。调节页面大小，可以完全自适应。

JS调整

　　加载页面和调整窗口大小的时，设置html的字体大小，已达到自适应的目的。

    (function(){

      var doc = document.documentElement,

          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

      function changeFontSize(){

        var clietWidth = doc.offsetWidth,

            scale = clietWidth/768;   //以768为标准

        doc.style.fontSize = scale * 16 + 'px';

      }

      if (!doc.addEventListener) return;

      window.addEventListener(resizeEvt,changeFontSize)  //窗口大小变化或者手机横屏

      document.addEventListener('DOMContentLoaded',changeFontSize) //加载页面触发

    })()

　　1、获取视口宽度

　　2、以视口宽度对标准的变化，设置html的font-size