目錄

?

1.什么是rem?

2.為什么要用rem(rem有什么優點)？

怎樣使用rem？

---

1.什么是rem?

rem（font size of the root element）是指相對于根元素的字體大小的單位。

2.為什么要用rem(rem有什么優點)？

都知道現在手機屏幕分辨率越來越多了，假設我們的網頁需要適配的iPhone4（320px），iPhone6(375px)，iPhone6 Plus(414px)。

我們的需求是，當用戶瀏覽網頁時，根據屏幕的尺寸，來向用戶展示更適合用戶的文字、圖片、按鈕大小。

在rem概念沒引入前我們的做法是，以最小的屏幕（iPhone）做一版數據出來，然后通過js去控制viewport 的 initial-scale （網頁縮放比例）。

早期【天貓】移動端也是用用這樣的方法實現的。能滿足我們的需求。缺點是：這樣做會使得，因為initial-scale越來越大，相當于拉伸網頁，而使得在大屏幕的移動端設備下，文字、圖片會變模糊。

為了更好的滿足用戶需求，讓我們的工作更加完美，rem就有出現的必要了。下面比較一下 px em 和 rem 的優缺點：

1.px：像素是相對于顯示器屏幕分辨率而言的相對長度單位。pc端使用px倒也無所謂，可是在移動端，因為手機分辨率種類頗多，不可能一個個去適配，這時px就顯得非常無力，所以就要考慮em和rem。IE無法調整那些使用px作為單位的字體大小（Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)）。2.em（font size of the element）:相對值,它以父元素的大小為基準單位,來計算大小.所以很難把握.3.rem:root em,就是相對于根目錄的em而不是相對于父元素,也就是說,它雖然是絕對值,但是只是相對于根目錄來說也就是html,它不會隨著其它元素的改變而改變.也就是說,我們只要設定html的文字大小就可以了.而不用考慮其它因素.而且他還具有非常好的支持Chrome,Firefox,Safari,Opera,IE9+。IE6,7,8就只能使用px或者em了.

怎樣使用rem？

rem是只相對于根元素htm的font-size，即只需要設置根元素的font-size，其它元素使用rem單位設置成相應的百分比即可。

一般情況下，是這樣子使用的

1 html{font-size:62.5%;} /*因為100%=16px，1px=6.25%，所以10px=62.5%， 這是的1rem=10px，所以12px=1.2rem。px與rem的轉換通過10就可以得來*/ 2 body{font-size:12px;font-size:1.2rem ;} /*為了兼容IE的低級版本還要寫font-size:12px,別忘了要寫在rem的前面*/ 3 p{font-size:14px;font-size:1.4rem;} 在這里我要提到一點的就是,假如你要**用rem來設置行高邊距**之類的單位.則需要在html中加入這么一句話:-webkit-text-size-adjust:none;來消除webkit的默認屬性.否則在其它的地方rem不是以根目錄作為基準值了.

移動端做適配的時候，可以使用這樣的方法

方案一

@media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-size:56.25px;}} @media screen and (min-width: 375px) {html{font-size:58.59375px;}} @media screen and (min-width: 400px) {html{font-size:62.5px;}} @media screen and (min-width: 414px) {html{font-size:64.6875px;}} @media screen and (min-width: 440px) {html{font-size:68.75px;}} @media screen and (min-width: 480px) {html{font-size:75px;}} @media screen and (min-width: 520px) {html{font-size:81.25px;}} @media screen and (min-width: 560px) {html{font-size:87.5px;}} @media screen and (min-width: 600px) {html{font-size:93.75px;}} @media screen and (min-width: 640px) {html{font-size:100px;}} @media screen and (min-width: 680px) {html{font-size:106.25px;}} @media screen and (min-width: 720px) {html{font-size:112.5px;}} @media screen and (min-width: 760px) {html{font-size:118.75px;}} @media screen and (min-width: 800px) {html{font-size:125px;}}

方案二

@media screen and (min-width: 320px) {html{font-size:312.5%;}} @media screen and (min-width: 360px) {html{font-size:351.5625%;}} @media screen and (min-width: 375px) {html{font-size:366.211%;}} @media screen and (min-width: 400px) {html{font-size:390.625%;}} @media screen and (min-width: 414px) {html{font-size:404.2969%;}} @media screen and (min-width: 440px) {html{font-size:429.6875%;}} @media screen and (min-width: 480px) {html{font-size:468.75%;}} @media screen and (min-width: 520px) {html{font-size:507.8125%;}} @media screen and (min-width: 560px) {html{font-size:546.875%;}} @media screen and (min-width: 600px) {html{font-size:585.9375%;}} @media screen and (min-width: 640px) {html{font-size:625%;}} @media screen and (min-width: 680px) {html{font-size:664.0625%;}} @media screen and (min-width: 720px) {html{font-size:703.125%;}} @media screen and (min-width: 760px) {html{font-size:742.1875%;}} @media screen and (min-width: 800px) {html{font-size:781.25%;}} @media screen and (min-width: 960px) {html{font-size:937.5%;}}

方案三

var designWidth = 640, rem2px = 100; document.documentElement.style.fontSize = ((window.innerWidth / designWidth) * rem2px) + 'px';

方案四

var designWidth = 640, rem2px = 100; document.documentElement.style.fontSize = ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';

這里的轉換可以根據自己的需要進行計算設置，并不是規定死的，比如你可以設置1rem=10px，也可以設置1rem=100px。
關于這四個方案的理解和改進，請點擊下面的鏈接，里面講的很清楚~：
這樣子就能做到僅僅改變html的字體大小，讓其他字體具有“響應式”嘍。

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第二篇说说rem（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

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