前端rem單位的使用研究

2021-09-20 10:47:22 字數 479 閱讀 6420

分析網易新聞手機web端,發現裡面大量使用了rem這個單位進行計算大小。

針對rem這個單位有如下解析:

px:畫素是相對於顯示器螢幕解析度而言的相對長度單位。pc端使用px倒也無所謂,可是在移動端,因為手機解析度種類頗多,不可能乙個個去適配,這時px就顯得非常無力,所以就要考慮em和rem。

em:繼承父級的,假設html的font-size預設為16px,body字型大小定義為50%,那麼在body裡字型大小就是1em=8px了。可當你又定義了乙個div,然後把字型設定成了50%,請問,現在div下的1em等於多少?因為繼承了父級的值,現在這個div裡的1em=4px,這麼巢狀下去的話,抱歉,我數學不好!所有rem就出現了。

rem:是em的公升級版,rem只會相對html的值,不會受到父級的影響,這樣的好處在於:從em裡的例子來講,1rem始終會等於8px。使用的時候不需要重新計算rem此時的大小。rem因為是css3增加的,所以ie8或以下請無視。

參考:

前端rem單位的使用研究

分析網易新聞手機web端,發現裡面大量使用了rem這個單位進行計算大小。針對rem這個單位有如下解析 px 畫素是相對於顯示器螢幕解析度而言的相對長度單位。pc端使用px倒也無所謂,可是在移動端,因為手機解析度種類頗多,不可能乙個個去適配,這時px就顯得非常無力,所以就要考慮em和rem。em 繼承...

前端rem單位的正確使用姿勢

原文 主題html 寫這篇文章是因為自己被rem這個坑絆過腳,因此特意去研究了下rem這個單位。簡單闡述下px em rem之前的關係 其實網上很多,我這裡稍微提一下 先丟擲乙個問題 為什麼要選擇rem?px 畫素是相對於顯示器螢幕解析度而言的相對長度單位。pc端使用px倒也無所謂,可是在移動端,因...

前端自適應 單位rem

通過使用,自我感覺網易的解決方案是最方便我們使用時候的計算。function factory function 注意 1.上邊解決方案,採用是750的psd設計 並不是網易的640 按照個人公司要求。2.此處1rem代表的是width 7.5 px 的結果,也就是750的100px,當我們在實際操作...