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