移動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;  
}

?