浅析响应式布局，rem布局,媒体查询布局 (2)

因为rem的基准点是根元素html的字体大小，因此我们只需要设置不同屏幕的html的font-size大小不一样就可以达到不同屏幕的适配了。

rem与媒体查询

使用rem配合媒体查询可以适配多个终端

   @media (min-width: 320px) {
     html {
       /*font-size: 100/750 * 320px*/
       font-size: 42.67px;
    }
  }
   @media (min-width: 375px) {
     html {
       font-size: 50px;;
    }
  }
   @media (min-width: 414px) {
     html {
       font-size: 55.2px;;
    }
  }
   @media (min-width: 480px) {
     html {
       font-size: 64px;;
    }
  }
   @media (min-width: 640px) {
     html {
       font-size: 85.33px;
    }
  }
   @media (min-width: 750px) {
     html {
       font-size: 100px;;
    }
  }

优点：使用媒体查询适配，速度快。

缺点：适配多个终端时，需要添加响应的代码。

rem与javascript

通过javascript获取可视区的宽度，计算font-size的值，也可以适配多个终端。

var base = 100;
var design = 750;
​
function responsive() {
 var pageWidth = window.innerWidth;
​
 if ( pageWidth <= 320 ) {
   pageWidth = 320;
}
​
 if ( pageWidth >= 750 ) {
   pageWidth = 750;
}
​
 var size = base / design * pageWidth;
 document.documentElement.style.fontSize = size + "px";
}
​
responsive();
window.addEventListener("resize", responsive);

优点：直接适配所有的终端

缺点：必须在页面加载之前设置html的font-size值，不然会出现文字大小调动的情况。