本文推薦 PC 端閱讀~
本文版權歸 “公眾號 | 前端一萬小時” 所有，未經授權，請勿轉載！
複製程式碼
css_04
複製程式碼
1. 你有沒有使用過視網膜解析度的圖形？當中使用什麼技術？
2. px，em，rem，vw 有什麼區別？
複製程式碼前言： 本篇也是一篇純基礎、純理論文章，但重要性毋庸置疑：“……在利用 CSS 能做的幾乎所有工作中，其基礎都是“單位”，這是影響所有屬性的“顏色”、“距離”和“大小”的一種元素……如果理解了這裡介紹的概念，你就能更快地學習和使用 CSS 的餘下內容”。
1 指定顏色
對於“顏色”的學習，讓我們先認真複習文章：《用李濤高手之路前3節課開啟我們光與色的大門》。
在此篇基礎上，我們可以很輕鬆的認識到：一個 Web 創作人員至少可以用 3 種方法來設定“顏色”。
1.1 按“顏色名”指定顏色
CSS2.1 定義了 17 種顏色名，CSS3 中包含了基於標準 X11 RGB 值的 140 種顏色的擴充套件顏色表。如下例，這些顏色可以直接以“名字”的方式拿來用，大多數瀏覽器都能識別。
h1 {
color: red;
}
h2 {
color: green;
}
h3 {
color: maroon;
} /*褐紅色*/
複製程式碼但，這種顏色展示方式的弊端就在於，沒辦法指定色譜中任意的顏色。
1.2 函式式 RGB 指定顏色
如下例，可以用“整數記法”，也可以用對應的“百分數記法”。二者沒有孰優孰劣之分，實際工作中“整數記法”更常用，更有用。
⚠️百分數是針對“255”來相應計算的，因為，RGB 三者中的任何一種光都有 0-255 個顏色的位置（0 是接近無顏色，255 就是很純的紅、綠、藍）。實際工作中，沒必要對二者進行轉換。
h1 {
color: rgb(255,0,0);
} /*紅色*/
h3 {
color: rgb(50%,0%,0%);
} /*褐紅色*/
h3 {
color: rgb(128,0,0);
} /*褐紅色*/
複製程式碼1.3 十六進位制 RGB 指定顏色：
h1 {
color: #CC6600;
}
複製程式碼⚠️上例程式碼中，#CC6600 就是一個十六進位制碼。格式為：
- 以 # 開頭
- 按順序分別用兩位數字指定紅、綠、藍的分量
- CC 為“紅”的分量、66 為“綠”的分量、00 為“藍”的分量
十六進位制碼並不是基於 0-9 這 10 個數字，而是基於 0-F 這 16 個數字：0、1、2、3、4、5、6、7、8、9、A（對應 10）、B（對應 11）、C（對應 12）、D（對應 13）、E（對應 14）、F（對應 15）。
把“十六進位制碼” #CC6600 轉化為“十進位制”：
- 將十六進位制顏色分解為“紅”、“綠”、“藍”份量：
紅：CC
綠：66
藍：00
- 以 CC 為例，我們知道，十進位制用兩位數最大隻能表示 99 ，而十六進位制是想通過用兩位數來表示 0-255 這所有 256 個值。
意思就是，十進位制是逢十進一，而十六進位制是逢十六進一。
那同為兩位數 CC ，在十進位制下，是十位的 C 個十、個位的 C 個 1；而十六進位制下，就是十六位下的 C 個十六、個位的 C 個 1。
故：十六進位制下的 CC 轉化為十進位制為：12 ✖ 16+12 ✖ 1=204。
- 同理得 66：6 ✖ 16+6 ✖ 1=102； 00 ：0 ✖ 16+0 ✖ 1=0。
即：
h1 {
color: #CC6600;
}
複製程式碼等同於：
h1 {
color: rgb(204,102,0);
}
複製程式碼也等同於：
h1 {
color: rgb(80%,40%,0%);
}
複製程式碼?當然，要把 RGB 十進位制轉化為十六進位制則是：用十進位制數字➗16，所得數字小數點前的整數部分為“十六位”；再將小數點後的數乘以 16，所得的數為個位。
2 絕對長度單位
描述現實世界的長度單位有很多。
釐米（cm）、毫米（mm）、英寸（in）、點（pt）、派卡（pc）等都屬於絕對長度單位。“點”和“派卡”是印刷術語，用作印刷的度量單位。
- 1 英寸=2.54 釐米
- 1 釐米=0.394 英寸
- 1 英寸=72 點
- 1 英寸=6 派卡
- 1 派卡=12 點
為什麼我們要使用這麼多的單位？可以簡單理解成不同地區對長度單位的定義不同，有各種各樣的歷史遺留問題。
我們在現實世界中描繪的長度，是一維空間（點到點的長度表示的內容）的度量，是客觀存在且固定的物理距離，只是人們會用不同的單位去表達。而對於電子螢幕，使用的長度單位和方式，和一維世界是不同的。
對於當今的程式語言來說，長度是一個相對的概念。
3 相對長度單位
3.1 px
顯示器成像是由無數個可以發出單一色彩的映象管組成，而這個最小的成像單位和長度，我們就稱為——畫素。而一臺顯示器，包含的有效畫素，即稱為——解析度，通常使用寬、高的畫素數量進行標示。理論上越大的解析度，可以容納的畫面內容就越多（顯示的內容更多、更清晰）。
px 被定義為相對單位，是因為它取決於顯示器的解析度。一旦解析度確定，設定為 px 的尺寸就成為固定尺寸，不會自動縮放。
但，關於 px 我們還有以下資訊需要掌握：
如果我們同時使用解析度為 1920*1080 的兩個螢幕，尺寸不一樣，那麼就出現了新的概念—— PPI ，即“每英寸包含的畫素數量”（畫素的密度單位，PPI 值越高，畫面的細節就會越豐富）。
DPI ——是指輸出分辨，針對輸出裝置而言的，每英寸包含的墨點數量。
⚠️所以，畫素（px）在真實世界中的大小是不固定的。曾經，普通的顯示器裡，我們用畫素就可以描述大多數的情況。但是，“視網膜螢幕 retina”誕生後，舊有平臺的影像如果根據其實際畫素在視網膜螢幕中顯示時，字型、圖示等就會變得特別小：
為了適應實際使用體驗和相容性，廠商發展出了“畫素合併技術”（輸出來的影像、文字比以前更細膩，因為可以顯示的細節更多），過去 1px 的面積包含了更多的畫素單位：
所以，很多時候直接使用 px 作為長度單位已經無法滿足日常的需求，需要依具體情況而定。
?在以後學習的移動端前端開發中，iOS 和安卓沒有“畫素”這個單位，我們用 PT/DP 來描繪在一個螢幕中各個元素的大小。
3.2 em
1em 被定義為一種給定字型的 font-size 值。
如下例，當 em 用於設定元素的 font-size 屬性本身時，em 的值會相對於父元素的字型大小改變。
<body>
回答問好
<div class="div1">fine
<div class="div2">thank you
<div class="div3">and you?</div>
</div>
</div>
</body>
複製程式碼div {
font-size: 1.5em;
}
複製程式碼計算關係是這樣的：回答問好 的 font-size 是繼承自跟元素 html，html 的尺寸是瀏覽器預設尺寸 14px ；fine 的 font-size=1.5 ✖ 14px = 21px ；thank you 的 font-size=1.5 ✖ ️21px = 31.5px ；and you? 的 font-size=1.5 ✖ 31.5px = 47.25px ；
如果手動設定 thank you 的 font-size 為 40px ，那麼 and you? 的 font-size 應該為 1.5 ✖ 40px = 60px 。
但，由於 em 的值會隨元素的不同而發生變化，這給計算帶來極大的困難。於是，就產生了 rem 這個相對單位。
3.3 rem
rem——root em 是相對於根元素 <html> 的字型大小單位。
例如還是上面的 html 程式碼，新增如下樣式：
.div3 {
font-size: 1.5rem;
}
複製程式碼
此時 and you? 的 font-size = 1.5 ✖ 14px = 21px = 1.5 ✖ html 的 font-size 。
3.4 ex
ex 是一個相對長度單位，1ex 被定義為一種給定字型的小寫字母 “x” 的高度。因此，這個值會隨字型的不同而變化。
然而，很多瀏覽器都沒有內建 ex 高度值，只是簡單的取 em 的值，再取其一半作為 ex 的值。所以，一般不推薦使用 ex 這個長度單位。
3.5 視口單位 vw、vh、vmin、vmax
3.5.1 vw
視口寬度的1/100 。
3.5.2 vh
視口高度的1/100 。
例如，桌面端瀏覽器視口尺寸為 650px，那麼 1vw = 650 ✖ (1/100) = 6.5px (這是理論推算得出，一般瀏覽器不支援 0.5px，那麼實際渲染結果可能是 7px)。
3.5.3 vmin
vw 和 vh 中的最小值。
3.5.4 vmax
vw 和 vh 中的最大值。
例如，瀏覽器的寬度設定為 1200px，高度設定為 800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果寬度設定為 600px，高度設定為 1080px，1vmin 就等於 6px，1vmax 則為 10.8px。
後記： CSS 值和單位包含的面很廣，細小的知識點還有很多，且各個單位也各有優缺點，需要在具體情況下酌情使用。不必一蹴而就，慢慢來，慢慢地把各個知識點選破。
加油！