rem布局實現步驟（REM布局原理）

2023-11-12 06:49:29 3

em 是一個布局的長度單位，當前對象內文本的字體大小的相對單位，也就是說相對於當前元素的font-size。

rem 是（根）字體大小相對單位，也就是說跟當前元素的font-size沒有關係，而是跟整個body的font-size有關係。

物理像素是硬體的一個實際像素；而邏輯像素是我們在網頁設計中使用的像素。它跟物理像素的關係是有一個設備像素比的關係，比如說設備像素比是2，那麼就說明一個邏輯像素對應著4個物理像素，它們是一個平方的關係。

meta標籤，我們可以指定瀏覽器的適口，適口就是可以看見的區域。然後它有三個需要了解的概念，分別是：

layout viewport 瀏覽器的默認適口，也就是clientWidth，在PC端如果把瀏覽器最大化的時候我們可以發現clientWidth與innerWidth是相同的，但是在移動端是不一樣的；它是行動裝置默認的viewport。

visual viewport 瀏覽器的可視區域大小，在手機瀏覽器中的innerWidth是小於clientWidth，在PC端最大化的時候兩者是一樣的，但是在手機端最大化是兩者是不一樣的。

ideal viewport 是一個理想化的適口viewport。這個概念更多的取決於具體的需求，比如說在2倍的環境下開發和當前的尺寸下開發那麼它的ideal viewport是不一樣的。這裡面有一個概念叫initial-scale 縮放比例，它是layout viewport相對於ideal viewport 的縮放比例。更準確的說ideal viewport是由layout viewport和initial-scale 縮放比例決定的。

vw / vh

在移動端布局的時候，為了高清的還原設計圖我們需要根據設備的像素比把我們實際的ideal viewport做一個縮放，縮放的目的就是為了保證設計圖的尺寸跟實際的物理像素是對應的。