CSS Measurments List

一、像素(pixel)

像素是CSS中的基本單位，表示網頁上的長度或距離。1個像素等於顯示屏上一個點的大小。在CSS中，像素可以用來設置元素的高度、寬度、邊框、內邊距、外邊距、字體大小等屬性。

div {
  width: 200px;  /* 設置寬度200像素 */
  height: 100px;  /* 設置高度100像素 */
  border: 1px solid #ccc;  /* 設置邊框 */
  padding: 10px;  /* 設置內邊距 */
  margin: 10px;  /* 設置外邊距 */
  font-size: 14px;  /* 設置字體大小為14像素 */
}

在不同的設備上，像素的實際大小會有所不同，比如在高分辨率的Retina屏幕上，1個像素的大小會比普通屏幕上要小。因此，我們需要使用其他單位來適配不同的設備屏幕。

二、百分比(%)

百分比是相對於其容器元素的長度或高度來計算的單位，在CSS中可用於設置元素的寬度、高度等。例如，可以使用百分比來設置網頁布局的寬度，以實現響應式設計。

.container {
  width: 80%;  /* 設置容器寬度為父元素寬度的80% */
  margin: 0 auto;  /* 水平居中 */
}

由於百分比是相對於其容器元素的大小計算的，因此在不同的設備屏幕上，元素的大小會隨着其父元素的變化而變化。

三、視口寬度和高度(vw和vh)

視口寬度和高度是相對於瀏覽器窗口的大小來計算的單位，在CSS3中引入。vw單位表示視口寬度的1/100，vh單位表示視口高度的1/100。使用vw和vh可以實現響應式設計，確保元素的大小能隨着瀏覽器窗口的大小變化而變化。

.container {
  width: 50vw;  /* 設置容器寬度為視口寬度的50% */
  height: 50vh;  /* 設置容器高度為視口高度的50% */
}

需要注意的是，vw和vh在IE瀏覽器中的支持度不高，因此在使用時需要注意瀏覽器兼容性。

四、EM和REM

EM和REM均是相對單位，用於設置字體大小和容器的尺寸。EM單位是相對於父元素的字體大小來計算的，而REM單位是相對於根元素（html元素）的字體大小來計算的。

body {
  font-size: 16px;  /* 設置根元素字體大小 */
}

.container {
  font-size: 1em;  /* 設置字體大小為父元素字體大小的1倍 */
}

.box {
  width: 10rem;  /* 設置容器寬度為根元素字體大小的10倍 */
}

EM和REM可以用於實現響應式設計，同時也有助於提高代碼的可維護性。

五、自適應單位

自適應單位是CSS3中引入的相對單位，能夠根據屏幕密度和顯示屏幕尺寸變化而自動變化。自適應單位主要包括以下三種：

• fr：網格布局單位，代表可用空間的一部分
• ch：字符寬度單位，代表“0”的寬度
• vw、vh、vmin、vmax：視口百分比單位，相對於視口大小計算

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;  /* 設置兩列寬度比為1:2 */
}

.box {
  width: 20ch;  /* 設置容器寬度為20個“0”的寬度 */
}

.element {
  width: 50vmin;  /* 設置元素寬度為視口寬高中較小的一半 */
}

自適應單位在實現響應式設計時非常方便，同時也可以提高用戶體驗。

結語

CSS中的單位非常豐富，可以根據實際需求選擇合適的單位進行布局和設計。在實際開發中，我們需要根據頁面特點和業務需求來選擇合適的單位，以實現良好的用戶體驗。