一文讀懂 CSS 單位

家好，我是Echa。

最近有不少的粉絲老鐵們私信我為啥這幾天沒有創作新內容了，實在對不住。小編我身在廣州中招羊了，我在最近一篇文章也有提到過，今天是第四天，基本上康復了，奧密克戎BA.5其實沒有那么恐怖，中招了前三天特難受，熬過來了就沒事了，大家莫慌?，F在小編就可以認認真真的繼續創作內容了。同時也非常感謝大家默默的關心我小編身體狀況，非常謝謝。

創作不易，喜歡的老鐵們加個關注，點個贊，后面會持續更新干貨，速速收藏，謝謝！

說起 CSS 單位，我們最常用的可能就是像素單位（px），它是一個絕對單位，也就是說一個10px的文字，放在哪里都是一樣大的。單位可以影響顏色、距離、尺寸等一系列的屬性。CSS中單位的形式有很多種，下面就來學習一下 CSS 中單位！

1. 相對單位

相對單位就是相對于另一個長度的長度。CSS中的相對單位主要分為兩大類：

字體相對單位，他們都是根據font-size來進行計算的。常見的字體相對單位有：em、rem、ex、ch；
視窗相對單位，他們都是根據視窗大小來決定的。常見的視窗相對單位有vw、vh、vmax、vmin。

下面就來看看這些常見的CSS單位。

（1）em 和 rem

em是最常見的相對長度單位，適合基于特定的字號進行排版。根據CSS的規定，1em 等于元素的font-size屬性的值。

em 是相對于父元素的字體大小進行計算的。如果當前對行內文本的字體尺寸未進行顯示設置，則相對于瀏覽器的默認字體尺寸。當DOM元素嵌套加深時，并且同時給很多層級顯式的設置了font-size的值的單位是em，那么就需要層層計算，復雜度會很高。

當然，上面的這個說法是不嚴謹的。來看一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent {
            width: 300px;
            height: 300px;
            font-size: 20px;
        }
        .child {
            border: 1em solid ;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
           子元素
        </div>
    </div>
</body>
</html>

這里給父元素設置了字體大小為20px，然后給子元素的border寬度設置為1em，這時，子元素的border值為20px，確實是相對于父元素的字體大小設置的：

那如果我們給子元素的字體設置為30px：

.child {
  font-size: 30px;
  border: 1em solid ;
}

這時可以看到，子元素的邊框寬度就是30px，它是相對自己大小進行計算的：

所以，可以得出結論：如果自身元素是沒有設置字體大小的，那么就會根據其父元素的字體大小作為參照去計算，如果元素本身已經設置了字體，那么就會基于自身的字體大小進行計算。

em單位除了可以作用于 font-size之外，還可以運用于其他使用長度的屬性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用還是比較復雜的，它可能會繼承任意一級父元素的字體大小。需要謹慎使用。

rem相對于em就簡單了很多，它是根據頁面的根元素（根元素）的字體大小來計算的。來對上面的例子進行修改：

.child {
  font-size: 30px;
  border: 1rem solid ;
}

html {
 font-size: 25px;
}

效果如下，可以看到，邊框的長度變成了25px，它是根據根元素html的字體大小計算的：

如果沒有對根元素設定字號的話，font-size: 1rem的作用與font-size: initial相同。

使用 em 和 rem 可以讓我們靈活的夠控制元素整體的放大和縮小，而不是固定大小。那何時應使用 em，何時應使用 rem 呢？可以根據兩者的差異來進行選擇：

兩者在客戶端中計算出來的樣式都會以px的形式顯示；
rem是相對于根元素html的font-size計算，em 相對于元素的font-size計算；
當需要根據瀏覽器的font-size設置縮放時，應該使用 rem；
使用 em 應該根據組件的font-size來定，而不是根元素的font-size來定；
rem 可以從瀏覽器字體設置中繼承 font-size 值， em 可能受任何繼承過來的父元素 font-size 的影響。

（2）ex 和 ch

ex 和 ch 都是排版用的單位，它們的大小取決于元素的font-size 和 font-family屬性。

ex 指的是所用字體中小寫字母 x 的高度。因此，如果兩個字體不一樣，那么 ex 的值是不一樣的。因為每種字體的小寫 x 的高度是不一樣的。
ch 和 ex 類似，不過它是基于數字 0 的寬度計算的。會隨著字體的變化而變化。而0 的寬度通常是對字體的平均字符寬度，它是一個估計值。由于 ch 是一個近似等寬的單元，所以在設置容器的寬度時很有用，比如一個容器想要顯示指定個數的字符串時，就可以使用這個單位。

（3）vw、vh、vmax 和 vmin

這四個單位都是視窗單位，所謂的視窗，在web端指的就是可視區域，移動端的視窗指的就是布局視窗。如果視窗大小發生了變化，那么這些值都會隨之變化。這四個單位指的是：

vw：視窗寬度的百分比；
vh：視窗高度的百分比；
vmax：較大的 vh 和 vw；
vmin：較小的 vh 和 vw。

假如一個瀏覽器的高度是800px，那么1vh的值就是8px。vh和vw的大小總是和視窗的高度和寬度有關。

vmin 和 vmax 與視窗寬度和高度的最大值和最小值有關。假如一個瀏覽器高度為500px，寬度為1200px，那么1vmin就是5px，1vmax就是12px。

這些單位都是長度單位，所以可以在任何允許使用長度單位的地方使用。這些單位比較適合用于創建全視區界面，例如移動設備的界面，因為元素是根據視區的尺寸而變化的，與文檔樹中的任何元素都沒有關系。

2. 絕對單位

在 CSS 中，絕對單位包括：px 、pt 、pc、 cm 、 mm 、in 等。絕對單位是一個固定的值，它反應了一個真實的物理尺寸。它不會受屏幕大小或者字體的影響。它們的大小取決于值以及屏幕的分辨率（DPI，每英寸的點數）。px就是我們最常用的絕對單位之一。這些絕對單位的換算關系如下：

1in = 25.4mm = 2.54cm = 6pc = 72pt =96px

（1）px

px 全稱為 Pixels，表示像素，它并不嚴格等于顯示器的像素，尤其在高清屏下。盡管CSS單位會根據瀏覽器、操作系統或者硬件適當縮放，在某些設備或者用戶的分辨率設置下也會發生變化，但是96px通常等于一個物理英寸的大小。

CSS 將光柵圖像(如照片等)的顯示方式定義為默認每一個圖像大小為1px。一個“600x400”解析度的照片的長寬分別為“600px”和“400px”，所以照片本身的像素并不會與顯示裝置像素一致，而是與 px 單位一致。如此就可以將圖像完整的與網頁的其它元素排列起來。

很多時候， px 也常被稱為 CSS 像素。它是一個絕對單位，但也可以被視為相對單位，因為像素單位相對的是設備像素。在同一個設備上，每 1 個 CSS 像素所代表的物理像素是可以變化的；在不同的設備之間，每 1 個 CSS 像素所代表的物理像素是可以變化的。

.box {
    width: 100px;
    height: 100px;
}

（2）pt

pt 全稱為 Point，表示點。常用于軟件設計和排版印刷行業（筆者做的前端系統，最終的產物就是一個需要拿去印刷的PDF，所以會經常用到這個單位）。當使用這個單位時，無論顯示器的分辨率是多少，打印在紙上的結果都是一樣的。

如果單純為了網頁的顯示，建議就使用px像素單位，如果需要輸出印刷產品，就可以考慮使用pt。

（3）pc

pc 全程為 Picas，表示派卡。相當于我國新四號鉛字的尺寸。派卡也是印刷的術語，1派卡等于12點。它和 px 的換算關系如下：

1pc = 16px

（4）cm

cm 全稱為 Centimeters，表示厘米。它和 px 的換算關系如下：

1cm = 37.8px

（5）mm

mm 全稱為 Millimeters，表示毫米。它和 px 的換算關系如下：

1mm = 3.78px

（6）in

in 全稱為 Inches，表示英寸。它和 px 的換算關系如下：

1in = 96px

3. 頻率單位

CSS中的頻率單位有兩個：赫茲（Hz）和千赫茲（kHz）。它們的換算關系如下：

1kHz = 1000Hz

通常情況下，頻率單位使用在聽或說級聯樣式表中。頻率可以被用來改變一個語音閱讀文本的音調。低頻率就是低音，高頻率就是高音。

.low { 
  pitch: 105Hz; 
} 

.squeal { 
  pitch: 135Hz; 
}

需要注意，當數值為0時，單位對值沒有影響，但是單位是不能省略的。也就是說0、0Hz、0kHz是不一樣的。所以，在使用頻率單位時，不要直接寫0。另外，這兩個單位是不區分大小寫的。

4. 時間單位

CSS中的時間單位有兩個：秒（s）和毫秒（ms）。這兩個時間單位都是CSS新增的單位。這兩個單位的換算關系如下：

1s = 1000ms

時間單位主要用于過度和動畫中，用于定義持續時間或延遲時間。下面兩種定義是等效的：

a[href] {
 transition-duration: 2.5s;
}

a[href] {
 transition-duration: 2500s;
}

5. 分辨率單位

CSS中的分辨率單位有三個：dpi、dpcm、dppx。這三個單位都是CSS3中華新增的單位。他們都是正值，不允許為負值。這三個單位的換算關系如下：

1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

分辨率單位主要用于媒體查詢等操作。

（1）dpi

dpi 全稱為 dots per inch，表示每英寸包含的點的數量。普通屏幕通常包含 72或96個點，大于 192dpi 的屏幕被稱為高分屏。


@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }

（2）dpcm

dpcm 全稱為 dots per centimeter，表示每厘米包含的點的數量。

@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }

（3）dppx

dppx 全稱為 dots per pixel，表示每像素（px）包含點的數量。由于CSS px的固定比率為1:96，因此1dppx相當于96dpi。它對應于由圖像分辨率定義的CSS中顯示的圖像的默認分辨率。

@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

6. 角度單位

CSS中的角度單位有四個：deg、grad、rad、turn。這些角度單位都是CSS3中新增的單位。它們的換算關系如下：

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

一般這些角度單位用于元素的旋轉操作，包括2D旋轉、3D旋轉等。

當旋轉值為正值時，元素會順時針旋轉；
當旋轉值為負值時，元素會逆時針旋轉。

通常情況下，一個完整的旋轉就是360度。所以，所有的角度都在0-360度之間。但是，超出這個范圍的值也是允許的，只不過都會歸到0-360度之間。比如，順時針旋轉420度（450deg）、逆時針旋轉270度（-270deg）、順時針旋轉90度（90deg）都是一樣的效果，都會歸為90deg。但是當使用動畫時，這些角度值就非常重要了。

CSS的旋轉主要依賴于 transform 屬性中的 rotate() 、rotate3d、 skew() 等方法。只需給它們傳遞旋轉的角度即可。

除了旋轉會使用角度之外，線性漸變也會經常使用角度值：

background: linear-gradient(45deg, #000, #fff);

（1）deg

deg 全稱為 Degress，表示度，一個圓總共360度。

transform: rotate(2deg);

（2）grad

grad 全稱為 Gradians，表示梯度，一個圓總共400梯度。

transform: rotate(2grad);

（4）rad

rad 全稱為 Radians，表示弧度，一個圓總共2π弧度。

transform: rotate(2rad);

（4）turn

turn 全稱為 Turns，表示圈（轉），一個圓總共一圈（轉）。

transform:rotate(.5turn);

7. 百分比單位

百分比（%）也是我們比較常用的單位之一，所有接受長度值的屬性都可以使用百分比單位。但是不同屬性使用該單位的效果可能并不一樣。但是都需要有一個參照值，也就是說百分比值是一個相對的值。

下面來看看常見場景中的百分比單位的使用。

（1）盒模型中的百分比

在CSS中的盒模型包含的屬性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。這些屬性在使用百分比時，參照物不盡相同：

width、max-width、min-width：值為百分比時，其相對于包含塊的 width 進行計算；
height、max-height、min-height：值為百分比時，其相對于包含塊的 height 進行計算；
padding、margin：值為百分比時，如果是水平的值，就是相對于包含塊的 width 進行計算；如果是垂直的值，就是相對于包含塊的 height 進行計算。

（2）文本中的百分比

在CSS中文本控制的屬性有font-size、line-height 、vertical-align、 text-indent等。這些屬性在使用百分比時，參照物不盡相同：

font-size：根據父元素的font-size 進行計算；
line-height：根據font-size進行計算；
vertical-align：根據line-height進行計算；
text-indent：如果是水平的，則根據width進行計算，如果是垂直的，則根據 height 進行計算。

（3）定位中的百分比

在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作為單位。其參照物就是包含塊的同方向的width和height。不同定位的包含塊不盡相同：

如果元素為靜態（ static ）或相對定位（ relative ），包含塊一般是其父容器；
如果元素為絕對定位（ absolute ），包含塊應該是離它最近的 position 為 absolute 、 relative 或 fixed 的祖先元素；
如果元素為固定定位（ fixed ），包含塊就是視窗（ viewport ）。

（4）變換中的百分比

CSS 中的 transform 屬性中的 translate 和 transform-origin 值也可以設置百分比。

translateX() 根據容器的 width 計算
translateY() 根據容器的 height 計算
transform-origin 中橫坐標（ x ）相對于容器的 width 計算；縱坐標（ y ）相對于容器的 height 計算

注意，在 translate 還有一個 z 軸的函數 translateZ() 。它是不接受百分比為單位的值。

前端開發中，會涉及到許多與像素相關的概念，這些概念在不同的場景下有不同的應用，理解它們對我們開發高質量的網頁和應用至關重要。本文將帶你詳細解析設備像素、CSS像素、設備獨立像素、DPR和PPI之間的區別，并通過示例代碼來說明它們的實際應用。

1. 什么是設備像素（Device Pixel）？

設備像素是設備顯示屏上最小的物理顯示單元，無論是顯示文字、圖像還是任何其他內容，都需要使用這些最基本的單位。

例如，一個1920x1080分辨率的顯示器擁有1920個水平設備像素和1080個垂直設備像素，總共有超過200萬個設備像素。

2. 什么是CSS像素（CSS Pixel）？

CSS像素是一個與設備無關、標準化的測量單位，定義了CSS樣式在屏幕上應該占據的空間。例如，當你在CSS中定義一個元素寬度為100px，這里的100px指的就是CSS像素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS像素示例</title>
<style>
  .box {
    width: 100px; /* 100 CSS像素 */
    height: 100px; /* 100 CSS像素 */
    background-color: lightblue;
  }
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在這個示例中，.box的寬度和高度均為100 CSS像素。

3. 什么是設備獨立像素（Device Independent Pixel, DIP）？

設備獨立像素（DIP），也稱虛擬像素，是一種抽象的單位，用于確保在高DPI（每英寸像素數）屏幕上的尺寸一致性?，F代瀏覽器和設備通過將CSS像素映射到設備像素來實現這一效果，從而在不同的設備上呈現一致的視覺效果。

4. 什么是設備像素比（Device Pixel Ratio, DPR）？

設備像素比（DPR）是設備像素和CSS像素之間的比例。DPR用于定義設備上一個CSS像素對應的物理像素數。DPR的值可以通過window.devicePixelRatio來獲取。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>獲取DPR示例</title>
</head>
<body>
  <script>
    console.log(`設備像素比DPR: ${window.devicePixelRatio}`);
  </script>
</body>
</html>

在這個示例中，通過window.devicePixelRatio可以獲取當前設備的DPR值。

5. 什么是每英寸像素數（Pixels Per Inch, PPI）？

每英寸像素數（PPI）用于衡量屏幕的像素密度，表示每英寸所包含的像素數。PPI越高，屏幕顯示的圖像越細膩、越清晰。

6. 示例代碼：解析不同設備的像素差異

為了更好地理解以上概念，我們構建一個實戰示例，通過在不同DPI設備上的布局來說明這些概念如何影響實際開發。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>設備像素與CSS像素示例</title>
<style>
  .container {
    width: 300px; /* CSS像素 */
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
  }
  .device-pixel-box {
    width: 300px; /* CSS像素 */
    height: 50px; /* CSS像素 */
    background-color: coral;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>設備像素與CSS像素示例</h1>
    <div class="device-pixel-box"></div>
    <p>設備像素比DPR: <span id="dpr"></span></p>
    <p>屏幕PPI: <span id="ppi"></span></p>
  </div>

  <script>
    // 獲取DPR
    const dpr = window.devicePixelRatio;
    document.getElementById('dpr').textContent = dpr;
    
    // 計算PPI（假設屏幕對角線尺寸為15.6英寸，1920x1080分辨率）
    const screenDiagonalInches = 15.6;
    const screenWidthPixels = window.screen.width * dpr;
    const screenHeightPixels = window.screen.height * dpr;
    const screenResolution = Math.sqrt(screenWidthPixels**2 + screenHeightPixels**2);
    const ppi = screenResolution / screenDiagonalInches;
    document.getElementById('ppi').textContent = ppi.toFixed(2);
  </script>
</body>
</html>

在這個示例中：

.device-pixel-box的寬度和高度均為300 CSS像素。
通過JavaScript獲取當前設備的DPR和計算屏幕的PPI，并在頁面中顯示出來。

總結

掌握設備像素、CSS像素、設備獨立像素、DPR和PPI之間的區別和聯系，是前端開發者的必備技能。這些概念雖然專業性較強，但卻是開發高質量、跨設備適應性強的Web應用的基礎。通過本文的詳細解析和示例代碼，希望能幫助你更好地理解這些概念，并在實際開發中靈活應用。

在實際項目中，理解和正確使用這些概念，不僅能提升應用的視覺效果，還能增強用戶體驗。如果你在開發過程中有任何疑問或不同的見解，歡迎在評論區留言交流。

日常開發中，px一定是大家接觸過最多的css單位，但是你真的了解px嘛？1px在屏幕中到底是多大呢？另外不知道大家有沒有過下面這些疑惑:

為什么一個元素在pc上和移動端的物理尺寸不一樣，但是兩者的視覺效果上卻差不多呢？改變屏幕的分辨率時，屏幕上顯示的內容大小為什么會跟著改變？縮放瀏覽器時，瀏覽器中的內容的大小為什么會跟著改變？

想回答以上問題，我們就要知道css中的px到底指的是什么？

什么是css px?

在回答什么是css px之前，我們先要了解兩個概念——設備像素和參考像素。

設備像素(device pixel)

來看這張顯示器屏幕的放大圖。

從圖中可以看到，顯示器屏幕實際上是由一個一個"點"組成的（每個"點"又包含3個單位，也稱三元素組)，這些"點"就是設備像素。

需要注意的是,device pixel實際是可以"變化"的，當你降低設備分辨率時，一個"點"就需要更多的三元素組來組成，此時"點"的物理尺寸就增大了。以下是維基百科關于這點的說明，想了解更多，請點擊這里查看。

因為多數計算機顯示屏的分辨率可以通過計算機的操作系統來調節，顯示屏像素的分辨率可能不是一個絕對的衡量標準。

現代液晶顯示屏按設計有一個原始分辨率，它代表像素和三元素組之間的完美匹配。

對于該顯示器，原始分辨率能夠產生最精細的視頻。但是因為用戶可以調整分辨率，顯示器必須能夠顯示其它分辨率。非原始分辨率必須通過在液晶顯示屏上擬合重新取樣來實現，要使用插值算法。這經常會使顯示屏看起來破碎或模糊。例如，原始分辨率為1280×1024的顯示器在分辨率為1280×1024時看起來最好，也可以通過用幾個物理三元素組來表示一個像素以顯示800×600，但可能無法完全顯示1600×1200的分辨率，因為物理三元素組不夠。

由于不同的設備屏幕分辨率和尺寸可能不一樣，所以設備上物理像素的大小也就不一樣。但是對于css來說，它希望在所有的設備上元素的顯示效果看起來都是差不多的。

那怎么才能讓同一元素在不同的設備上顯示的效果差不多呢？w3c提出了一個概念，也就是下面將要介紹的參考像素(reference pixel)。

參考像素(reference pixel)

從上面這幅圖可以看到，近處的鐵軌看起來很大，而遠處的鐵軌看起來很小。這是由于我們眼睛的視角所產生"近大遠小"的透視現象所造成的。

那設想一下，如果遠處的鐵軌比近處的鐵軌尺寸大一些，是不是我們看遠處的鐵軌就和看近處的差不多大了呢。

css參考像素(reference pixel)就是應用了這個原理，w3c是這樣定義參考像素的

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees.

注意了，css參考像素它是一個visual angle，即一個約等于0.0213度的角。當設備的典型觀看距離越遠時，參考像素就越大（注意這里的大，不是指視角變大，而是角度對應在屏幕上的尺寸變大）。

在介紹完設備像素和參考像素之后，下面該輪到今天的主角——css像素出場了。

css像素(css pixel)

顧名思義，css pixel是css樣式表語言中用來表示長度的一個單位，類似的單位還有pt,in,cm等。像pt,in,cm等都是物理單位，相對好理解，而px則有點抽象。

一個px到底是多大? 它又和pt,in,cm的長度等有什么聯系呢？這些都是亟待我們思考的問題。

在思考這些問題之前，先看下面這段w3c規范

For a CSS device, these dimensions（指in,pt,px等length單位） are either anchored by relating the physical units to their physical measurements, or by relating the pixel unit to the reference pixel. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit.For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

對于css length單位（當然也包括px）來說，不同的分辨率設備對它們的影響是不同的。

對高分辨率顯示設備（如打印機），length的anchor unit(可以理解為基準單位)推薦使用基于物理測量的inches,centimeters等。而對于低分辨率的設備(如電腦顯示器)，anchor unit推薦使用pixel單位。下面具體來講講這兩者的區別：

高分辨率設備（high-resolution devices）

關于分辨率的東西這里不多講，不熟悉的同學可以點擊這里查看。我們之前說了，對于高分辨的顯示設備，基準單位是基于物理測量的inches, centimeters。

基于物理測量是什么意思呢？就是它實際的物理長度。如單位cm，用css設置一個盒子的寬度為1cm,那它就等于物理上的1cm，你用尺子去量，它就是1cm。

那現在問題來了，px呢？px怎么去基于物理測量呢？

這個問題我們結合w3c和mdn，就能得到解答:

Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.

However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1/96th of 1in.

現在知道了，在高分辨率設備下，1px就等于96分之一英寸，約等于0.2646mm。

低分辨率設備（low-resolution devices）

對于低分辨率設備來說，anchor unit是基于pixel unit的，那pixel unit又是什么呢？如果有仔細看過css像素那小節里引用w3c的那段說明的話，答案你應該已經知道了。為了說明方便，還是把那句最重要的話再寫一遍。

For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

這句話非常重要?。?！

可以說理解了這句話，你就基本上理解了什么是css像素。這里為了照顧部分英語不好的同學，我把這句話翻譯一遍

對于這樣的設備（這里指低分辨率設備），建議像素單位參考最接近參考像素的整數個設備像素。

我們舉個例子來說明一下，一個分辨率為1680 * 1050的22寸電腦顯示器。對于電腦顯示器來說，它的參考像素約為0.26mm(這個值的大小由設備的典型視距決定，出廠時已經確定)。

確定了參考像素之后，再來計算設備像素。通過分辨率和尺寸，計算出該顯示器的ppi

為90.05，此時一個設備像素的值就等于0.28mm。

對比這兩個像素值之后發現，一個設備像素的值是最接近參考像素的。所以對于這個設備來說，一個像素單位(1px)就等于一個設備像素。

到這里，相信大家對css px是什么應該有了一個基本的概念。下面我們通過分析文章開始時提出的幾個問題，來進一步加深對css px的印象。

分析問題

（1）為什么一個元素在pc上和移動端的物理尺寸不一樣，但是兩者的視覺效果上卻差不多呢？

因為css px是基于參考像素確定的，而參考像素就是為了讓同一元素在不同設備上顯示效果盡量一致而設計的（對于移動端和pc端來說，參考像素的物理大小肯定不一樣，但是顯示效果基本是一致的）。所以同一個元素，盡管在pc端和移動端尺寸不一樣，但視覺效果卻是差不多的。

（2）當改變屏幕的分辨率時，屏幕上顯示的內容大小為什么會跟著改變？

我們舉一個例子來說明這個問題，還是以上面那個典型的22寸顯示器為例：

正常分辨率下，即1680 * 1050，此時的ppi是90.05，那一個device pixel的長度就約為0.28mm。這時一個device pixel就約等于一個參考像素對應的大小。如果你用css定義了一個盒子寬為375px，此時你用尺子去屏幕上量，會發現375px盒子的實際寬度是0.28(mm) * 375 ≈ 10.5cm。調整顯示器的分辨率為1024 * 640時，此時一個device pixel對應的長度是0.46mm，雖然它和參考像素對應的大小有差距，但是沒辦法，你還得使用它，畢竟它現在就是最接近參考像素大小的device pixel了。上面那個375px的盒子，此時的實際寬度則為0.46 * 375 ≈ 17.4cm。所以降低分辨率之后，相同的內容會顯得大了。調整顯示器的分辨率為1920 * 1080，此時一個device pixel對應的長度是0.25mm，此時375px的盒子實際寬度是0.25 * 375 ≈ 9.3cm，所以提高分辨率后，內容自然就變小了。

（3）當你縮放瀏覽器大小時，瀏覽器中的內容的大小會跟著改變？

這個現象，ppk在之前的一篇文章里提到過?？s放瀏覽器時，也就相當于改變了瀏覽器的分辨率，所以這個問題和第2個一樣，這里也就不多贅述了。

總結

1.對于低分辨率設備（絕大部分顯示器，手機屏幕），1個css像素相當于最接近參考像素的整數個設備像素。

2.對于高分辨率設備(打印機)來說，1個css像素就是96分之一英寸。

3.參考像素(reference pixel)就是從一臂之遙看解析度為96DPI的設備時，1個設備像素的視角（但為了方便計算，都把這個視角轉換為其在顯示設備上對應的大小）。

3.在低分辨率設備中，pt,cm,in等單位的大小不等于它的物理大小，它們的大小需要px（這時等于xx個設備像素）來進行轉換，如1in此時等于96個設備像素的大小(即96px)。

4.在高分辨率設備中，1px也不等于xx個設備像素，px的大小就等于固定值。

5.設備像素(device pixel)不是固定不變的，除非你的設備不能調整分辨率。

參考文獻：

A tale of two viewports — part one

w3c css規范

CSS像素、物理像素、邏輯像素、設備像素比、PPI、Viewport

wiki pixel

wiki 液晶顯示器

移動端高清、多屏適配方案

rethinking the pixel it‘s all relative now

A Pixel Identity Crisis

作者：淼淼真人
鏈接：http://www.imooc.com/article/details/id/75237
來源：慕課網

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商