## 深入理解px（二） ### root:fontSize 基準值 `html {font-size: 16px;}` rem 單位：元素 (all) px = `元素 rem` * `root:fontSize (px/rem) ` 默認 `root:fontSize: 100%(16px)`，此時 `1rem = 16px ; 1px = 0.0625rem` 即：`root:fontSize: 100% (16px/1rem)`。將現有的 px 單位 轉換為 rem 單位時 除以 16，或者 乘以 0.0625(62.5%) 就行。 >[tip] root:fontSize 有兩種值，px單位 和 百分比，**要注意的是 兩個值是相互獨立沒有關系的，不要以為 只是百分比寫法而已。** > 默認初始不寫任何樣式時，默認的文字字體大小為16px ---- ### 期望 這樣當我們想寫 10px 時 就要在腦海中做計算，計算出 (10 * 0.0625) rem； 這太麻煩了，也不夠直觀，我們希望 1px = 0.1rem，這樣 10px = 1rem 就很好轉換了，并且也非常直觀。 ### 那么 合適的 root:fontSize 應該是多少？ 期望 root fontSize: 10px; 表示: 10px/1rem，10px = 1rem，1px = 0.1rem 這樣是為了現有的 px 單位轉換成 rem 時好計算。 ``` 16px = 16 px/rem * 1rem 16px = 10 px/rem * 1.6rem 16px 時 100% 10px 時 呢？ 1 ? 16 10 ? = 10 / 16 = 62.5% ``` 所以 10px 時 百分比為 62.5%，即 `root:fontSize: 10px;` 等價 `root:fontSize: 62.5%`; > 如果為了轉換方便而去定義 “合適的” `root:fontSize` 就沒必要了，現在都有工具來輔助完成轉換，特別是在前端工程化的今天，這么做主要是為了適配，即根據設備、屏幕分辨率等情況自動調節 `root:fontSize` 來實現適配。 > 最好的轉換比例是1:1，1px = 1rem；即 `root:fontSize: 1px(6.25%);` ### 瀏覽器：fons-size: 12px 為最小值，沒有更小的了 不過遺憾的是，瀏覽器標準規定了 基準值不能小于12px，瀏覽器無法顯示 10px 的字體大小，最小字體大小為 12px，所以 此時 1rem 也是顯示 12px，所以 期望 10px = 1rem 是做不到的，即使這定義了，瀏覽器也會按照 最小 12px/1rem 來計算。所以 上面想 1:1 也實現不了，因為 至少 1rem = 12px; 即 至少 `root:fontSize: 12px(75%)` > 如果要實現 顯示 10px 的字體大小，那么只能只用 縮放來變通實現了。 ### 注意 ```css html { font-size: 625%; /*font-size: 100px;*/ } body { font-size: 14px } ``` 如果定義了基準值，那么要設置下 body 的字體大小值，不然會影響頁面上其他不使用rem且沒定義字體大小的元素的字體大小，因為 找不到繼承，最終繼承到 html上去了。 ### 為什么要適配？ PC 端不需要適配，因為我們不希望不同大小的屏幕都顯示一樣多的內容，我們希望大屏能看到更多的內容，一覽無余的感覺（思考，但現在pc頁面都做了響應式，也要兼顧移動端，這種情況怎么辦呢）。 主要是移動端需要適配，保證一份設計稿在多種屏幕 都能呈現出一致（一模一樣，即 盡管在不同屏幕上，但 每個元素大小與屏幕大小的比例都是一致的）的效果，微信小程序 rpx 就是一個適配單位。 以 375px 來出設計稿，開發時按照 1px = 2rpx 進行轉換就能夠適配到多種屏幕，而不用去關心每個屏幕的分辨率了。 即 認為 所有設備都是 750rpx 的，其它具體分辨率無需關心即可。相當于微信充當了一個中間層，動態調節了 真實px 與 rpx 的關系，屏蔽了不同屏幕的差異性，所以我們面對一致的 rpx就可以了。 移動端 rem 適配 也是這個原理。如 設置 root:fontSize: width() / 3.75 px; 即 root:fontSize: 100px，1px = 0.01rem ### 擴展 [一篇搞定移動端適配](https://mp.weixin.qq.com/s/ysPmhr0zwscxPE3Q_xtY3w)