移动web开发适配rem

移动的meta标签 <meta  name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

 

常见移动web适配方法：

1.定高，百分比布局

2.flex布局

3.media媒体查询

 

rem（font size of  the root element）原理与简介：

1.字体单位：它的值根据html根元素大小来定，同时可以作为宽度高度等单位。

2.适配原理： 将px改为rem，动态修改html的font-size大小。

3.兼容性： ios6以上和 android2.1以上 ,基本覆盖所有流行手机系统。

 

动态修改html 的font-size：

1.使用媒体查询的方式:

　　

    /*大于320px小于360px宽度的时候*/media screen and (max-width: 360px) and (min-width:321px){html{font-size: 20px;}}/*小于320px宽度的时候*/media screen and (max-width: 320px){html{font-size: 24px;}}

 

缺点：需要适配很多机型的宽度，而且范围要清楚：min-width- xx  max-width xx,

 

 

2.使用js动态修改html font-size

    //获取html宽度let htmlWidth = document.documentElment.clientWidth || document.body.clientWidth; //兼容性写法//获取html元素        let htmlDom = document.getElementsByTagName("html")[0];//设置html font-sizehtmlDom.style.fontSize = htmlWidth / 10 +"px"; //动态计算html font-size的值

 

使用scss进行rem自动转化(使用npm 安装 node-sass)

@function px2rem($px){$rem : 37.5px; /*定义基准值*/@return ($px / $rem) + rem;
}    .test{width: px2rem(100px);height: px2rem(100px);
}/*编译之后的值*/
.test{width: 2.66667rem;height: 2.66667rem;  
}