常見(jiàn)移動(dòng)web布局適配方法
- 固定高度，寬度百分比：這種方法只適合簡(jiǎn)單要求不高的webApp名扛，幾乎達(dá)不到大型項(xiàng)目的要求谅年，屬于過(guò)時(shí)的方法。
- Media Query（媒體查詢）：現(xiàn)在比較主流的適配方案肮韧，比如我們常用的樣式框架Bootstrap就是靠這個(gè)起家的融蹂，它能完成大部分項(xiàng)目需求，但是編寫(xiě)過(guò)于復(fù)雜弄企。
- flex布局：主流的布局方式超燃，不僅適用于移動(dòng)Web，網(wǎng)頁(yè)上也表現(xiàn)良好拘领，這也是現(xiàn)在工作中用的最多的布局方式淋纲，項(xiàng)目盡量采用flex+rem的方式進(jìn)行布局和完成移動(dòng)端的適配。
rem單位介紹
-
rem（font size of the root element）是相對(duì)長(zhǎng)度單位院究。相對(duì)于根元素（即html元素）font-size計(jì)算值的倍數(shù)。 - 適配原理：將px替換成rem本涕，動(dòng)態(tài)修改html的font-size適配业汰。它可以很好的根據(jù)根元素的字體大小來(lái)進(jìn)行變化，從而達(dá)到各種屏幕基本一致的效果體驗(yàn)菩颖。
實(shí)例
未適配
新建一個(gè)項(xiàng)目样漆，寫(xiě)入以下代碼
<div class="test">
<p class="hello">Hello World</p>
</div>
然后給html一個(gè)樣式
.test{
width:320px;
height:160px;
background-color: bisque;
text-align: text；
}
.hello{
color:orangered;
}
使用px作為單位晦闰，在移動(dòng)端調(diào)試模式iphone5環(huán)境查看一下放祟。會(huì)發(fā)現(xiàn)div的寬度是正好的，再查看一下字體呻右，發(fā)現(xiàn)大小是16px跪妥。
iphone5環(huán)境
在移動(dòng)端調(diào)試模式 iphone6/7/8 環(huán)境查看。刷新頁(yè)面后會(huì)發(fā)現(xiàn)div的寬度較窄声滥，再查看一下字體眉撵，發(fā)現(xiàn)大小還是16px。
iphone6/7/8環(huán)境
現(xiàn)在把CSS中的px單位換成rem單位來(lái)進(jìn)行測(cè)試落塑。因?yàn)閔tml根元素的字體大小是16px纽疟，那么換成rem單位，直接除以16就好憾赁。
.test{
width:20rem;
height:10rem;
background-color: bisque;
text-align: text污朽；
}
.hello{
color:orangered;
font-size:1rem;
}
頁(yè)面并沒(méi)有什么變化，我們只是掌握了換算關(guān)系龙考，還不能實(shí)現(xiàn)適配蟆肆，因?yàn)槲覀兏氐淖煮w是固定的矾睦。
JS控制適配屏幕
明白了REM的原理后，可以使用這個(gè)特點(diǎn)來(lái)進(jìn)行適應(yīng)布局了颓芭，這也是現(xiàn)在比較主流的移動(dòng)端web適配方案顷锰。
如果你有更好的方案，可以在文章下方進(jìn)行留言亡问。
<script>
/* 獲取移動(dòng)端屏幕的寬度 */
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
/* 獲取html DOM元素 */
let htmlDom = document.getElementsByTagName("html")[0];
/* 設(shè)置根元素字體大小 */
htmlDom.style.fontSize = htmlWidth / 20 + "px";
</script>
在移動(dòng)端調(diào)試模式iphone5環(huán)境查看一下官紫。會(huì)發(fā)現(xiàn)div的寬度是正好的，查看一下字體州藕，發(fā)現(xiàn)大小是16px束世。
適配后iphone5環(huán)境
在移動(dòng)端調(diào)試模式iphone6/7/8環(huán)境查看一下。會(huì)發(fā)現(xiàn)div的寬度也是正好的床玻，再查看一下字體毁涉，發(fā)現(xiàn)大小是18.75px。
適配后iphone6/7/8環(huán)境
