流式布局

移動端大量使用CSS3盒子模型 box-sizing

box-sizing: border-box; 很重要

移動端特殊樣式

如何動態設置html的 font-size

開始

js動態設置代碼，這里style里面就不用寫 html{font-size:100px;}

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

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

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

繼續

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

推導

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

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

然后給個demo 如下


別忘了設置

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

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

【在非標準屏幕上以同樣大小顯示同一張圖片時,就需要縮放圖片大小】咋解決呢，不至于寫js動態去適配所以設備吧？？？？？？？？

rem是如何實現自適應布局的？
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; } }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。