前提：页面元素的布局尺寸全都以设计稿为基准等比例设置。
给html根节点设置一个基础font-size值，然后页面的所有元素布局均相对于该font-size值采用rem单位设定。那么基础的font-size值该如何取呢？
假如通过媒体查询设置font-size，只能解决一部分的情况，而且并不能完成适配，因为手机屏幕宽度类型实在太多了，所以font-size的取值要通过js计算，取当前viewport的deviceWidth与设计稿的宽的比例值，例如：我们的设计稿尺寸都是720px的，iphone6的deviceWidth是375px，那么计算出来的font-size值就是 375 / 720 = 0.520833，因为得出的font-size太小，不方便计算，且有的浏览器可能不兼容太小字号，所以将font-size放大100倍，所以最终计算出来的font-size为 375 / 720 * 100 = 52.0833(px); 当然，这个值是根据设计稿来计算的，所以根据计算规则，下面列出几种常见设计稿相应的font-size值：
// deviceWidth = 320，font-size = 320 / 7.2 = 44.4433px
// deviceWidth = 375，font-size = 375 / 7.2 = 52.0833px
// deviceWidth = 414，font-size = 414 / 7.2 = 57.5px
// deviceWidth = 500，font-size = 500 / 7.2 = 69.4444px
// 可在script标签加上如下代码：
(function() {
document.addEventListener('DOMContentLoaded', function() {
setRem(720,100)
}, false);
})();
window.onresize = function() {
setRem(720,100)
};
function setRem(pwidth,pre){
console.log('setRem')
var html = document.documentElement;
var windowWidth = html.clientWidth;
html.style.fontSize = windowWidth /pwidth*pre + 'px';
};
----------------------------------------------------------------------------------------------
window.onload=function(){
getRem(720,100)
};
window.onresize=function(){
getRem(720,100)
};
functiongetRem(pwidth,prem){
varhtml=document.getElementsByTagName("html")[0];
varoWidth=document.body.clientWidth||document.documentElement.clientWidth;
html.style.fontSize=oWidth/pwidth*prem +"px";
}
onresize 当屏幕大小发生变化的时候执行的函数，当页面刷新的时候不执行，所以要添加onload事件，当首次加载或者刷新的时候设置fontSize的大小
// deviceWidth = 320，font-size = 320 / 7.2 = 44.4433px
// deviceWidth = 375，font-size = 375 / 7.2 = 52.0833px
// deviceWidth = 414，font-size = 414 / 7.2 = 57.5px
// deviceWidth = 500，font-size = 500 / 7.2 = 69.4444px
// 这个7.2就是根据设计稿的横向宽度来确定的，设计稿是720
// 至此，font-size的基础值就确定好了，而且知道该font-size值是手机deviceWidth跟设计稿的比例值 的 100倍（重要）
720是一个参数，是设计稿的大小，100是缩放比例，设置100方便换算
以此基准比例，无论多屏幕的手机型号，可是宽度deviceWidth都是7.2rem
// 2）那么页面元素该如何设置宽高、边距…
// 例如：一个设计稿宽高为140px的图标，左边距为50px，那么它的css应该这样写：
// .icon{
// width: 1.4rem; /* 像素换算rem：140px / 100 = 1.4rem */
// height: 1.4rem;
// margin: 000.5rem;
// }
// 因为html的font-size是放大了100倍，所以计算rem时，要用设计稿的实际像素除以100，140px / 100 = 1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽的比例自动计算出来。