注：移动端必须写：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
1.首先设置html{font-size: 25px;}
//页面宽度为html字体大小的rem(即25rem)(推荐html字体大小设置为12px到25px之间，不能设置大于25px,
// W3C对网页最小字体并没有硬性的规定。只是我们在设计网页的时候因为考虑到可阅读性，最小一般为12px大小，
// 如果设置大于25px，可能最终的html的字体大小会小于12px)
/**
*
* 注意rem单位计算方法：
* 元素大小/设计稿的1/25 25分之一
* 320/640 *25 这是一半
*
*/
var mresize=function(){
var view_width =window.innerWidth;//页面宽度
var path=$('html').css('font-size');//html字体大小
path=path.substring(0,path.length-2);
var n =view_width/path;//最终html的字体大小
$('html').css('font-size',n+"px");//(W3C对网页最小字体并没有硬性的规定。只是我们在设计网页的时候因为考虑到可阅读性，最小一般为12px大小.)
};
mresize();
2. 响应式布局
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
3.js定义meta 标签放缩和html字体大小
//1.获取像素比值 是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
var num = 1/window.devicePixelRatio; //2.动态生成视口标签
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale='+num+', maximum-scale='+num+', minimum-scale='+num+'" />');
//注：以上两段js可以不用，直接写meta标签禁止放缩
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
//3.获取页面的十分之1
var width = document.documentElement.clientWidth/10; //4.设置HTML字号为页面十分之1 1rem就是页面十分之1 （W3C对网页最小字体并没有硬性的规定。只是我们在设计网页的时候因为考虑到可阅读性，最小一般为12px大小.）
document.getElementsByTagName('html')[0].style.fontSize = width+'px';
/**
*
* 注意rem单位计算方法：
* 元素大小/设计稿的1/10 十分之一
* 320/640 *10 这是一半
*
*/