移動端web開發適配方法--使用rem
阿新 • • 發佈：2019-01-24
移動端web頁面的特點
1.跑在手機端的web頁面（也叫作H5頁面吧，因為對於手機而言，它是相容所有HTML5新特性的）；
2.跨平臺，web頁面開發程式碼不僅可以在PC端跑，也可以在手機端跑，包括安卓和IOS；
3.基於webview（其實就是我們移動終端開發技術的一個元件，可簡單理解為一個瀏覽器，我們給它一個URL，它就可以開啟並顯示在手機端的瀏覽器）；
4.告別IE，擁抱webkit；
5.更高的適配和效能要求。
常見移動web適配方法
PC端
1.960px/1000px 居中
2.盒子模型，定寬，定高
3.display: inline-block;
移動web
1.定高 寬度百分比
2.flex佈局
3.Media Query
rem(root of element)的原理與簡介
字型單位
rem的值根據html根元素的大小而定，同樣可以作為寬度、高度等單位
1rem = <html>的font-size適配原理
將平時使用的單位px替換成rem，動態修改html的font-size適配
相容性
IOS 6以上和Android 2.1以上，基本覆蓋所有流行的手機系統
動態修改html的font-size的方法
使用Media Query
@media screen and (max-width: 360px) {
html {
font-size: 14 使用JavaScript設定html的font-size
獲取視窗寬度
let width = document.documentElement.clientWidth ||
document.body.clientWidth;
設定<html>的font-size
width / 10 px配合css前處理器scss使用
以iPhone6為例(375*667)
@function px2rem($px) {
$rem: 37.5px
@return ($px/$rem) + rem;
}