移动端适配（rem单位定义方法）

 

注：移动端必须写：

<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 这是一半
 *
 */