每日一題(開開森森學前端之REM)

_Dreams發表於2019-05-02

前言

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

先來瞄一眼問題

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

反正我當時的反應是:

每日一題(開開森森學前端之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的相關知識了,大家共勉!

大佬們如果發現了文中的錯誤,及時在評論區指出,我會及時修改!

如果覺得對您有用請點個贊,謝謝大佬!

相關文章