移动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- 360px) and (min-321px){
　　　　html{
　　　　　　font-size: 20px;
　　　　}
　　}
   /*小于320px宽度的时候*/

　　media screen and (max- 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-size
    htmlDom.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;  
}