目錄

?

1.什么是rem?

2.為什么要用rem(rem有什么優(yōu)點(diǎn))？

怎樣使用rem？

---

1.什么是rem?

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

2.為什么要用rem(rem有什么優(yōu)點(diǎn))？

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

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

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

早期【天貓】移動端也是用用這樣的方法實(shí)現(xiàn)的。能滿足我們的需求。缺點(diǎn)是：這樣做會使得，因?yàn)閕nitial-scale越來越大，相當(dāng)于拉伸網(wǎng)頁，而使得在大屏幕的移動端設(shè)備下，文字、圖片會變模糊。

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

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

怎樣使用rem？

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

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

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

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

方案一

@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) + '%';

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

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

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

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

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