rem适配方案

  页面布局单位计算 一般有两大类：绝对长度单位和相对长度单位

　　绝对长度单位：

• • px 像素：是显示屏上显示的每一个小点，为显示的最小单位
  • in 英寸，1in = 96px
  • cm 厘米，1cm = 37.8px
  • mm 毫米，1mm = 3.78px
  • pt 磅，1pt = 1/72 英寸

 　　推荐使用  px（像素）

　　相对长度单位：

• • em　相对于当前元素的字体大小(font-size) ,当前元素未设置字体大小依赖其父元素字体大小一级级向上查找 1em= 1 × 当前元素字体大小;
  • rem   相对于根元素的字体大小(font-size),计算公式 1rem =1 ×  根元素字体大小;
  • %     目标元素宽度/父级元素宽度=百分比宽度 ;
  • ex & ch  相对于元素字符字体宽高
    • ex 　取自字符x的高度
    • ch    基于'0'这个字符字体的宽度计算
  • vw & vh  　根据 视口(浏览器可视化的区域) 的宽高计算 
    • vw  当前视窗宽度的 1%
    • vh   当前视窗高度的 1%
  • vmin & vmax 当前vw和vh中较小或者较大的值

  目前 IE8一下不支持 rem,IE9,10部分不支持

   如果这个属性根据它的font-size进行测量，则使用em

   其他的视情况使用对应单位.

rem 几种方法: 

js计算

   <script>
  /*让文字和标签的大小随着屏幕的尺寸变化 等比缩放*/
    var html = document.getElementsByTagName('html')[0];
   
    /*取到屏幕的宽度*/
    var width = window.innerWidth;
    var fontSize = 100/640*width;
    html.style.fontSize = fontSize +'px';
    window.onresize = function(){
        var html = document.getElementsByTagName('html')[0];
  
        var width = window.innerWidth;
  
        var fontSize = 100/640 * width;
        /*设置fontSize*/
        html.style.fontSize = fontSize +'px';
    }
</script>

 使用媒体查询:

@media (max-768px){
    html {
　　　　font-size:16px;
　　}
}