基礎與面試題：viewpoint 與 rem、百分比高度、px 一、定義一個表總結：名稱定義使用示例 viewpoint 是指用戶在網頁上實際可見和可交互的區域，通常指的是瀏覽器視窗或移動設備的屏幕尺寸。 width：100vw；height：100vh rem （root em）是相對 ...

基礎與面試題：viewpoint 與 rem、百分比高度、px

一、定義

一個表總結：

名稱	定義	使用示例
viewpoint	是指用戶在網頁上實際可見和可交互的區域，通常指的是瀏覽器視窗或移動設備的屏幕尺寸。	width：100vw；height：100vh
rem	（root em）是相對於根元素（通常是 `<html>` 元素）的字體大小來計算的單位。	width：100rem；height：100rem
百分比	是相對於父元素的尺寸來計算所占大小	width：100%；height：100%
px	像素	width：100px；height：100px

知識點補充：

1、viewpoint 怎麼來的？

註意：若要使用 viewpoint 必須在 <html> 的 <head> 中做如下聲明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
width=device-width：使 viewport 寬度等於設備的屏幕寬度，確保網頁在移動設備上可以完全顯示。

initial-scale：設置初始縮放級別，通常設置為 1，以避免頁面自動縮放。

minimum-scale 和 maximum-scale：指定允許用戶進行縮放的最小和最大比例。

user-scalable：控制用戶是否可以手動縮放頁面。

“viewport” 是一個非常重要的概念，特別是在移動端開發中更為突出。

在傳統的桌面瀏覽器中，viewport 的大小通常是瀏覽器視窗的大小，而在移動設備上，情況會更加複雜，因為移動設備的屏幕尺寸各異，且用戶可以縮放頁面。為了使網頁在移動設備上有良好的可視性和可交互性，開發者需要控制和優化 viewport。

Viewport 的計算方式可以用以下公式表示：(以 vw 為例子，vh 同理)

viewport width = device width / device pixel ratio

其中，viewport width 表示視口的寬度，device width 表示設備的物理像素寬度，device pixel ratio 表示設備像素比。

通過js進行計算示例：

// 獲取視口寬度
const viewportWidth = window.innerWidth;

// 獲取屏幕像素比
const pixelRatio = window.devicePixelRatio;

// 計算得到視點的大小
const viewportSize = viewportWidth / pixelRatio;

// 輸出視口寬度
console.log("視點:" + viewportSize); // 這就是100vw的大小了，相當於正好屏幕的寬度

2、rem 單位大小是怎麼計算的

rem 是指相對於根元素（<html> 元素）的字體大小的單位，它的計算方式是基於設備視口寬度和根元素字體大小的比例關係。

為了適應不同設備的視口大小和解析度，我們通常使用相對字體大小作為網頁設計的基礎單位。和相對於父級元素大小的 em 單位不同，rem 單位只相對於根元素的字體大小，因此可以確保網頁佈局在不同的設備和屏幕尺寸下一致。

假設我們將根元素的字體大小設置為 16px，則 1rem 就等於 16px。例如，如果我們使用 font-size: 1.5rem 來設置某個元素的字體大小，則該元素的字體大小就等於 1.5 * 16px = 24px。

當根據構建響應式的設計時，rem 單位也可以用於設置其他的樣式屬性，例如 padding、 margin、width 等。

為了確保使用 rem 單位時計算結果正確，我們需要考慮視口寬度和根元素字體大小的關係。一般來說，我們會將根元素字體大小設置為一個比較合適的基準大小，例如 16px、14px 等。然後，根據視口寬度的變化，調整字體大小和佈局的比例關係。

具體計算方式如下：

rem = px / 基準字型大小

其中，px 表示元素屬性的像素值，基準字型大小表示根元素的字體大小（單位為 px）。通過這個公式，我們可以將像素單位轉換成 rem 單位，並保證網頁在不同設備下的字體和佈局一致。

需要註意的是：使用 rem 單位時，不同瀏覽器對於字體大小的計算方式可能會存在差異。因此，在實際開發中，你可能需要使用 @media 媒體查詢或 JS 腳本來動態調整根元素的字體大小和 rem 單位的計算方式。

使用 js 獲取根節點的字體大小：

// 獲取根元素
const rootElement = document.documentElement;

// 獲取計算後的樣式
const computedStyle = window.getComputedStyle(rootElement);

// 獲取根元素上的字體大小
const fontSize = computedStyle.getPropertyValue('font-size');

// 輸出字體大小
console.log("字體大小:" + fontSize); // 一般而言是 16px, 也就是 1rem

二、viewpoint 與 rem 的差異

單位類型：
- rem（root em）是相對於根元素（通常是 <html> 元素）的字體大小來計算的單位。
- viewport 是指用戶在網頁上實際可見和可交互的區域，通常指的是瀏覽器視窗或移動設備的屏幕尺寸。
適用範圍：
- rem 主要用於設置字體大小和元素尺寸，它是相對於根元素的字體大小來計算的，可以用於實現相對於根元素的等比縮放。
- viewport 主要用於控制網頁在移動設備上的顯示效果，通過 <meta> 標簽設置 viewport，以確保頁面在不同設備上以正確的比例顯示，並控制用戶是否可以縮放頁面。
計算方式：
- rem 的計算是相對於根元素的字體大小，例如，1rem 等於根元素的字體大小。
- viewport 的計算是相對於視口的大小，例如，1vw 等於視口寬度的 1%。
應用場景：
- rem 通常用於實現相對於根元素的等比縮放，特別適用於響應式設計。
- viewport 用於控制網頁在移動設備上的顯示效果，確保頁面在不同設備上以正確的比例顯示，並控制用戶是否可以縮放頁面

三、viewpoint 與百分比的差異

基準不同：
- 百分比是相對於父元素的尺寸來計算的，而vw/vh是相對於視口的尺寸來計算的。
- 如果父元素的尺寸與視口尺寸相同，那麼百分比和vw/vh可能會產生相似的效果。但如果父元素的尺寸與視口尺寸不同，那麼它們就會產生不同的效果。
響應式性：
- 使用vw/vh更具有響應式的特性，因為它們是相對於視口的大小來計算的，可以隨著視口的變化而變化，從而更好地適應不同設備的屏幕尺寸。
- 百分比相對於父元素的大小計算，如果父元素的大小發生變化，那麼百分比計算出的大小也會相應變化，但它不直接與視口大小相關聯。
用途不同：
- 在某些情況下，使用百分比可能更適合，特別是當元素的尺寸應該相對於其父元素而不是整個視口時。
- 使用vw/vh通常更適合於實現基於視口大小的佈局和設計，尤其是在移動設備上。

四、像素（px）

一塊屏幕的能顯示的部分都是由一個一個的像素點構成的。在網頁和UI中，這也是不可再細分的單位，也是最小的單位。

上述 viewpoint、 rem、em、百分比其實本質上都是要確定需要在屏幕上使用多少個寬度像素作為一個基準單位來適應不同屏幕大小，以正常顯示網頁內容。

像素是圖像顯示和數字圖形處理中的基本單位，用於描述圖像的解析度和清晰度。一個像素代表圖像中的一個最小的、不可分割的點或顏色單元，是構成數字圖像的基本單元之一。

在電腦圖形學中，像素通常表示為一個有限的方塊或矩形區域，每個像素可以包含一個顏色值，用於描述圖像在該點的色調、亮度和飽和度等信息。根據顏色深度的不同，每個像素可以包含不同位數的顏色信息，例如 8 位顏色（256 色）、24 位真彩色（約 1677 萬色）等。

像素密度指的是每英寸包含的像素數量，通常表示為每英寸的像素數（PPI，Pixels Per Inch）。像素密度越高，圖像顯示的細節和清晰度就會更高，比如高解析度的 Retina 顯示屏就有更高的像素密度。

在不同的設備和顯示器中，像素的大小和顯示方式可能有所不同。例如，傳統液晶顯示器中的像素是一個固定大小的點，而在 Retina 顯示屏等高密度顯示器中，一個邏輯像素可能會對應多個物理像素，以提供更高清晰度的顯示效果。

總的來說，像素是數字圖像中描述圖形、圖像和文本的基本單元，它在電腦視覺、數字圖形處理、網頁設計等領域都有著重要的作用。我們通過調整像素的顏色、位置和密度等屬性，可以創造出各種豐富多彩的視覺效果。

五、使用方法推薦

本文並沒有對 em 做重點講解，但我考慮再三，還是把它加上，方便自己，也方便大家。

不同的單位在網頁設計和佈局中有各自的優勢和適用場景，下麵簡單介紹一下它們的特點和使用時機：

viewport 單位（vw、vh、vmin、vmax）：
- 最適用時機：viewport 單位是相對於視口大小的單位，適用於創建響應式佈局和元素尺寸的動態調整。可以使用 vw、vh 來設置視口寬度和高度的百分比，vmin 和 vmax 可以根據視口的最小或最大維度來設置大小。
rem 單位：
- 最適用時機：rem 單位是相對於根元素（<html>）字體大小的單位，適用於字體大小、間距和佈局的一致性調整。通過設置根元素的字體大小，可以靈活地調整整個頁面的佈局比例。
em 單位：
- 最適用時機：em 單位是相對於父元素字體大小的單位，適用於定義相對於父元素的尺寸比例。可以用於嵌套元素樣式的簡化和響應式設計中的相對大小設置。
百分比單位（%）：
- 最適用時機：百分比單位可以相對於父元素的大小進行設置，適用於創建相對於父元素的大小比例調整，實現響應式設計以及佈局的彈性調整。
像素單位（px）：
- 最適用時機：像素單位是絕對長度單位，適用於固定尺寸的元素設置，如邊框、陰影等。在某些情況下，使用像素單位可以確保元素大小的準確性和穩定性。

根據以上介紹，在實際 web 開發中，我們可以根據佈局的需求和設計的靈活性來選擇合適的單位。通常情況下，我們會結合使用不同單位來實現網頁佈局的靈活性和響應式設計的需求。在具體實踐中，根據設計的要求和佈局的需要，選擇合適的單位來輔助網頁設計和開發。

補充：（基準字型大小）

基準字型大小的確定並沒有一個固定的規定，它可以根據具體的設計需求和開發者的偏好來進行選擇。一般來說，基準字型大小可以根據以下幾個方面來確定：

設計師的建議：設計師通常會提供一些基準字型大小的建議，以適應設計稿的比例和整體效果。你可以與設計團隊或者設計師討論，並根據他們的建議來設定基準字型大小。
瀏覽器的預設字型大小：瀏覽器預設字型大小一般設置為 16px，因此在沒有顯式設置基準字型大小的情況下，可以將其作為預設的基準字型大小。
用戶體驗和可讀性：考慮到網頁的可讀性和用戶體驗，合適的基準字型大小應該在保持字體清晰度的同時，不會過大或過小，以免影響用戶的閱讀和瀏覽體驗。通常建議基準字型大小在 14px 到 18px 之間。
響應式佈局考慮因素：如果你的網頁設計是響應式的，需要適應不同的設備和屏幕尺寸，可以根據不同的媒體查詢設置不同的基準字型大小，以滿足不同屏幕大小下的顯示需求。

當你確定了基準字型大小後，可以將其應用於根元素 <html> 的樣式中，例如：

html {
  font-size: 16px; /* 基準字型大小 */
}

然後，使用 rem 單位來設置其他元素的字體大小、間距等屬性，像這樣：

h1 {
  font-size: 2rem; /* 相當於 32px（2 * 16px） */
  margin-bottom: 1.5rem; /* 相當於 24px（1.5 * 16px） */
}

值得註意的是，為了確保不同設備上的一致性，通常會使用媒體查詢或 JavaScript 等技術根據設備的寬度動態調整基準字型大小。這樣可以確保在不同設備上字體大小和佈局的比例關係相對一致。例如，可以通過媒體查詢來設置不同視口寬度下的基準字型大小，以適應不同屏幕大小。

一文搞懂：viewpoint與rem、百分比、px