移動的meta標(biāo)簽 <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.字體單位：它的值根據(jù)html根元素大小來定，同時(shí)可以作為寬度高度等單位。

2.適配原理： 將px改為rem，動態(tài)修改html的font-size大小。

3.兼容性： ios6以上和 android2.1以上 ,基本覆蓋所有流行手機(jī)系統(tǒng)。

?

動態(tài)修改html 的font-size：

1.使用媒體查詢的方式:

　　

/*大于320px小于360px寬度的時(shí)候*/media screen and (max-width: 360px) and (min-width:321px){html{font-size: 20px;}}/*小于320px寬度的時(shí)候*/media screen and (max-width: 320px){html{font-size: 24px;}}

?

缺點(diǎn)：需要適配很多機(jī)型的寬度，而且范圍要清楚：min-width- xx ?max-width xx,

?

?

2.使用js動態(tài)修改html font-size

//獲取html寬度let htmlWidth = document.documentElment.clientWidth || document.body.clientWidth; //兼容性寫法//獲取html元素 let htmlDom = document.getElementsByTagName("html")[0];//設(shè)置html font-sizehtmlDom.style.fontSize = htmlWidth / 10 +"px"; //動態(tài)計(jì)算html font-size的值

?

使用scss進(jìn)行rem自動轉(zhuǎn)化(使用npm 安裝 node-sass)

@function px2rem($px){$rem : 37.5px; /*定義基準(zhǔn)值*/@return ($px / $rem) + rem; } .test{width: px2rem(100px);height: px2rem(100px); }/*編譯之后的值*/ .test{width: 2.66667rem;height: 2.66667rem; }

?

轉(zhuǎn)載于:https://www.cnblogs.com/zzd0916/p/8808462.html

總結(jié)

以上是生活随笔為你收集整理的移动web开发适配rem的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。