《Oli的前端一萬小時》之：（4）CSS 值和單位

05-22

來自專欄 Oli的前端一萬小時

本知識學慣用時：3小時，總第29/10000小時

本文首發於微信公眾號：Oli的前端一萬小時

作者：Oli-Zhao

前言：本篇也是一篇純基礎、純理論文章，但重要性毋庸置疑：「……在利用 CSS 能做的幾乎所有工作中，其基礎都是「單位」，這是影響所有屬性的「顏色」、「距離」和「大小」的一種元素……如果理解了這裡介紹的概念，你就能更快地學習和使用 CSS 的餘下內容」。

一、指定顏色

對於「顏色」的學習，讓我們先認真複習文章：

Tang Aman：初識 UI | 用李濤高手之路前3節課開啟我們光與色的大門?

zhuanlan.zhihu.com

在此篇基礎上，我們可以很輕鬆的認識到：一個 Web 創作人員至少可以用3種方法來設置「顏色」。

1、按「顏色名」指定顏色：

CSS2.1 定義了17種顏色名，CSS3 中包含了基於標準 X11 RGB 值的140種顏色的擴展顏色表。如下例，這些顏色可以直接以「名字」的方式拿來用，大多數瀏覽器都能識別。

h1 {color: red;}h2 {color: green;}h3 {color: maroon;} /*褐紅色*/

但，這種顏色展示方式的弊端就在於，沒辦法指定色譜中任意的顏色。

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);} /*褐紅色*/

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，所得的數為個位。

二、絕對長度單位

描述現實世界的長度單位有很多。

厘米（cm）、毫米（mm）、英寸（in）、點（pt）、派卡（pc）等都屬於絕對長度單位。「點」和「派卡」是印刷術語，用作印刷的度量單位。

1英寸=2.54厘米
1厘米=0.394英寸
1英寸=72點
1英寸=6派卡
1派卡=12點

為什麼我們要使用這麼多的單位？可以簡單理解成不同地區對長度單位的定義不同，有各種各樣的歷史遺留問題。

我們在現實世界中描繪的長度，是一維空間（點到點的長度表示的內容）的度量，是客觀存在且固定的物理距離，只是人們會用不同的單位去表達。而對於電子屏幕，使用的長度單位和方式，和一維世界是不同的。

對於當今的編程語言來說，長度是一個相對的概念。

三、相對長度單位

顯示器成像是由無數個可以發出單一色彩的顯像管組成，而這個最小的成像單位和長度，我們就稱為——像素。而一台顯示器，包含的有效像素，即稱為——解析度，通常使用寬、高的像素數量進行標示。理論上越大的解析度，可以容納的畫面內容就越多（顯示的內容更多、更清晰）。

px 被定義為相對單位，是因為它取決於顯示器的解析度。一旦解析度確定，設置為px的尺寸就成為固定尺寸，不會自動縮放。

但，關於 px 我們還有以下信息需要掌握：

如果我們同時使用解析度為 1920*1080 的兩個屏幕，尺寸不一樣，那麼就出現了新的概念—— PPI，即「每英寸包含的像素數量」（像素的密度單位，PPI值越高，畫面的細節就會越豐富）。
DPI ——是指輸出分辨，針對輸出設備而言的，每英寸包含的墨點數量。
??所以，像素（px）在真實世界中的大小是不固定的。曾經，普通的顯示器里，我們用像素就可以描述大多數的情況。但是，「視網膜屏幕retina」誕生了後，舊有平台的圖像如果根據其實際像素在視網膜屏幕中顯示時，字體、圖標等就會變得特別小：

為了適應實際使用體驗和兼容性，廠商發展出了像素合併技術（輸出來的圖像、文字比以前更細膩，因為可以顯示的細節更多），過去 1px 的面積包含了更多的像素單位：

所以，很多時候直接使用 px 作為長度單位已經無法滿足日常的需求，需要依具體情況而定。
?? 在以後學習的移動端前端開發中， iOS 和安卓沒有「像素」這個單位，我們用 PT/DP 來描繪在一個屏幕中各個元素的大小。

1em 被定義為一種給定字體的 font-size 值。

如下例，當 em 用於設置元素的 font-size 屬性本身時，em 的值會相對於父元素的字體大小改變。

HTML:

<body> 回答問好 <div class="div1">fine <div class="div2">thank you <div class="div3">and you?</div> </div> </div></body>

CSS:

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這個相對單位

rem——root em 是相對於根元素 <html> 的字體大小單位。

例如還是上面的html代碼，添加如下樣式：

.div3 {font-size: 1.5rem;}

此時and you? 的 font-size = 1.5*14px = 21px=1.5*html 的 font-size。

ex是一個相對長度單位，1ex 被定義為一種給定字體的小寫字母「x」的高度。因此，這個值會隨字體的不同而變化。

然而，很多瀏覽器都沒有內置 ex 高度值，只是簡單的取 em 的值，再取其一半作為 ex 的值。所以，一般不推薦使用 ex 這個長度單位。

視口單位 vw,vh,vmin,vmax

①vw: 視口寬度的1/100

②vh: 視口高度的1/100

例如，桌面端瀏覽器視口尺寸為 650px，那麼 1vw = 650 * (1/100) = 6.5px (這是理論推算得出，一般瀏覽器不支持 0.5px，那麼實際渲染結果可能是 7px)。

③vmin: vw和vh中的最小值

④vmax: vw和vh中的最大值

例如，瀏覽器的寬度設置為 1200px，高度設置為 800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果寬度設置為600px,高度設置為1080px, 1vmin就等於6px, 1vmax則未10.8px。

後記：CSS 值和單位包含的面很廣，細小的知識點還有很多，且各個單位也各有優缺點，需要在具體情況下酌情使用。不必一蹴而就，慢慢來，慢慢地把各個知識點擊破。

歡迎繼續關注下文：

《Oli的前端一萬小時》之：（5）CSS 字體知多少？

（本文版權歸」公號 | Oli的前端一萬小時「所有，轉載需說明來源）