每日一題（開開森森學前端之REM）

前言

你們好，本人來在掘金待了有3個多月了，決定跟隨前端大佬們的步伐，故決定天天一題記錄本身的成長軌跡，因爲水平有限，對於文章中出現的問題還請大佬們指正。

先來瞄一眼問題

面試官一臉和善的問：請闡述下你理解的REM

反正我當時的反應是：

！若是你和我同樣，那麼就接着跟我一塊兒愉快的學習rem吧！

能夠看到本題考查的知識點其實考察瞭如下知識點

• 你對屏幕的邏輯分辨率和物理分辨率的理解
• 你對rem的原理的理解
• viewpoint

分層逐一攻破

概念

1.物理分辨率的概念：物理分辨率其實就是說屏幕實際的大小，大的屏幕同時必需要配備高的分辨率，也就是這個尺寸下能夠顯示多少個像素點，顯示的像素越多，就能夠更清晰。 2.邏輯分辨率的概念：就是手機的物理分辨率用程序裏的單位描述出來的結果就叫作邏輯分辨率

viewpoint(視口)

在手機上，視口與移動端瀏覽器的寬度再也不關聯，而是徹底獨立的了。咱們稱其爲佈局視口。

理想視口

當咱們將佈局視口的寬度設置成屏幕的寬度，就保證了頁面中CSS像素點的恆定。 這裏就用到了移動端適配經常使用的 這個標籤能夠保證在移動端設備中，頁面的寬度與屏幕寬度相同。

弄清了上面的預備知識點後咱們接下來看重頭戲！

rem

rem，經過計算或者JavaScript獲取到設備像素的比例，肯定根元素的字體像素，而後全部單位根據根元素字體像素進行rem設置，肯定大小。而基礎rem會根據設備變化而變化。

方案是將整個頁面寬度分紅100份，每10個單位寬度做爲1rem，假如拿到的視覺稿是750px的，那麼1rem就表明75px。這樣獲得的比例係數就是75/750，也就是每次在進行設計稿到CSS的轉換的時候，只須要對設計稿的像素值/10就能夠獲得對應的rem值。

總結

好啦這就是今天rem的相關知識了，你們共勉！

大佬們若是發現了文中的錯誤，及時在評論區指出，我會及時修改！

若是以爲對您有用請點個贊，謝謝大佬！