响应式布局

rem是什么？

　　rem是一个长度单位,常用的长度单位有：

　　* px: 绝对长度单位，最常用

　　* em: 相对长对单位，相对于父元素，不常用

　　* rem: 相对长度单位，相对于根元素，常用于响应式布局

　　* vw: 视口宽度， 100vw = 可视窗口的宽度

　　* vh: 视口高度，100vh = 可视窗口的高度

　　* vmin:选取vm和vh最小的那个

　　* vmax：选取vm和vh最大的那个

响应式布局的常用方案:

　　* media-query ，根据不同的屏幕宽度设置根元素 font-size  （现在已不常用）

　　 * rem ,基于根元素的相对单位 （大多网站采用此方案）

使用rem实现响应式布局：

　　使用js判断页面宽度，动态调整根元素html的font-size值。具体代码实现如下

/**
 * created by yangkk
 */
(function(doc,win){
    var flex = function() {
        var docEl = doc.documentElement;
        var deviceWidth = docEl.clientWidth > 500 ? 500 : docEl.clientWidth;
        docEl.style.fontSize = deviceWidth / 7.5 + "px";//如果设计图是320的话就除以3.2
    };
    flex();
    win.addEventListener('resize', flex, false);
})(document,window);

    优化： 还可以通过rem + vw 适配方案，同台设置根元素font-size值

• 适配原理
  • 1rem = 跟元素 font-size 值
  • 设计稿基准宽度 750px = 100vw, 可以推出1px = 0.133333vm;则 100px = 13.3333vm
  • 我们设置根元素 html 的font-size = 13.3333vm;
  • 此时1rem = 100px ，开发可以将设计稿元素 / 100 的道 rem值
• 代码实现

  @media only screen and (max-width: 750px) {
       html{
             font-size: 13.3333vw;
       } 
  }
  @media only screen and (min-width: 750){
       html{
             font-size: 100px
       }
  }