流式布局

移動(dòng)端大量使用CSS3盒子模型 box-sizing

box-sizing: border-box; 很重要

移動(dòng)端特殊樣式

如何動(dòng)態(tài)設(shè)置html的 font-size

開始

js動(dòng)態(tài)設(shè)置代碼，這里style里面就不用寫 html{font-size:100px;}

這樣應(yīng)該就可以完成自適應(yīng)了，記得編碼時(shí)不要用 px，而是用 px / 100 后的值，單位是rem。比如，當(dāng)手機(jī)是iphone6時(shí)，設(shè)備獨(dú)立像素是375px， document.documentElement.clientWidth / 3.75 的值是100 ，此時(shí) html的fontSize 是100px，如果設(shè)計(jì)師給的背景圖片寬度是以iphone6為基礎(chǔ)（375px）設(shè)計(jì)的（且圖片寬度占滿全屏—375px），那么我們只要寫img 的寬度為 width: 3.75rem; , 3.75rem是通過 375px 除以html里fontSize的值（100px）得出的。

當(dāng)手機(jī)是iphone6 Plus時(shí)，設(shè)備獨(dú)立像素是414px， document.documentElement.clientWidth / 3.75 的值是 110.4，此時(shí) html的fontSize 是110.4px，如果設(shè)計(jì)師給的背景圖片寬度是以iphone6 Plus為基礎(chǔ)（414px）設(shè)計(jì)的（且圖片寬度占滿全屏—414px），那么我們只要寫img 的寬度為 width: 3.75rem; , 3.75rem是通過 414px 除以html里fontSize的值（110.4px）得出的。
注意這里也是 3.75rem；

所以當(dāng)我們確定手機(jī)只用 iphone6時(shí)，可以在 html 中寫固定的 font-size 等于100px，然后用設(shè)計(jì)師給的圖片等元素的實(shí)際px除以100計(jì)算出 最終的rem，但是這種固定值的情況一般值出現(xiàn)在PC端開發(fā)，如PC端html的font-size 會(huì)設(shè)置為 16px好像。但是在移動(dòng)端就得使用js動(dòng)態(tài)計(jì)算了
計(jì)算js代碼如下

繼續(xù)

重點(diǎn)：如果讓html元素字體的大小，恒等于屏幕寬度的 1/100，那1rem 和 1x 就等價(jià)了

推導(dǎo)

按照前面所述，如果只適配iphone6，html的font-size 設(shè)置為 100px，計(jì)算時(shí)直接用 設(shè)計(jì)師給的元素的 px 除以 100 得到 xxxrem；
所以，如果iphone6 設(shè)置一個(gè)100px，等價(jià)于設(shè)置多少個(gè) vw呢？
思考提示：
iphone6 ： 375px 設(shè)備獨(dú)立像素 占 100vw
則有
375px / 100vw = 100px/ ?
計(jì)算得 ？ = 26.667vw
故
直接在 html中填寫 26.667vw可以達(dá)到和 編碼js 同樣子的效果，之后寫CSS時(shí)直接使用設(shè)計(jì)師的px除以100 即可得到 想要的 最終rem結(jié)果

總結(jié)：
結(jié)果就是html 設(shè)置 font-size 為 26.667vw 即可
其實(shí)這里的26.667vw就是指 100px;(iphone 6)

然后給個(gè)demo 如下


別忘了設(shè)置

demo（iphone6 ）中 樣式里面 .box h2 { font-size: 0.2rem; width: 3rem;},
此時(shí)
.box h2 的寬 width是 3rem，即3 * 100 = 300px;
.box h2 的font-size 是0.2rem ,是 20.0002px約等于 20px，即 0.2 * 100 = 20px;
如果這里不手動(dòng)寫 font-size ： 0.2rem; 則 文字的 font-size默認(rèn)使用根元素的font-size大小，即 100.001px約等于 100px，這里的小數(shù)應(yīng)該是 html{ font-size: 26.667vw} 導(dǎo)致的

在最后問一下圖片處理：問題來自 https://www.cnblogs.com/jiangzilong/p/6700023.html
手機(jī)屏幕變大但是加載的圖片不會(huì)變大，一般不需要一起變大吧？？？
iphone6Plus dpr 為3

【在非標(biāo)準(zhǔn)屏幕上以同樣大小顯示同一張圖片時(shí),就需要縮放圖片大小】咋解決呢，不至于寫js動(dòng)態(tài)去適配所以設(shè)備吧？？？？？？？？

rem是如何實(shí)現(xiàn)自適應(yīng)布局的？
http://caibaojian.com/web-app-rem.html

html {font-size : 20px; } @media only screen and (min-width: 401px){html {font-size: 25px !important;} } @media only screen and (min-width: 428px){html {font-size: 26.75px !important;} } @media only screen and (min-width: 481px){html {font-size: 30px !important; } } @media only screen and (min-width: 569px){html {font-size: 35px !important; } } @media only screen and (min-width: 641px){html {font-size: 40px !important; } }

總結(jié)

以上是生活随笔為你收集整理的移动布局+百分比布局+em+rem+动态设置根元素fontSize的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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