css_04 | CSS——CSS 值和單位

時間 2019-11-06

標籤 css 單位欄目 CSS 简体版

原文原文鏈接

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

css_04
複製代碼

1. 你有沒有使用過視網膜分辨率的圖形？當中使用什麼技術？
2. px，em，rem，vw 有什麼區別？
複製代碼

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

1 指定顏色

對於「顏色」的學習，讓咱們先認真複習文章：《web_05 | Web 前置知識——用李濤高手之路前3節課開啓咱們光與色的大門》。html

在此篇基礎上，咱們能夠很輕鬆的認識到：一個 Web 創做人員至少能夠用 3 種方法來設置「顏色」。前端

1.1 按「顏色名」指定顏色

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

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 就是一個十六進制碼。格式爲：
bash

以 # 開頭
按順序分別用兩位數字指定紅、綠、藍的份量
CC 爲「紅」的份量、66 爲「綠」的份量、00 爲「藍」的份量

十六進制碼並非基於 0-9 這 10 個數字，而是基於 0-F 這 16 個數字：0、一、二、三、四、五、六、七、八、九、A（對應 10）、B（對應 11）、C（對應 12）、D（對應 13）、E（對應 14）、F（對應 15）。編程語言

把「十六進制碼」 #CC6600 轉化爲「十進制」：函數

將十六進制顏色分解爲「紅」、「綠」、「藍」分量：
紅：CC
綠：66
藍：00
以 CC 爲例，咱們知道，十進制用兩位數最大隻能表示 99 ，而十六進制是想經過用兩位數來表示 0-255 這全部 256 個值。
那意思就是，十進制是逢十進一，而十六進制是逢十六進一。
那同爲兩位數 CC ，在十進制下，是十位的 C 個10、個位的 C 個 1；而十六進制下，就是十六位下的 C 個十6、個位的 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 值和單位包含的面很廣，細小的知識點還有不少，且各個單位也各有優缺點，須要在具體狀況下酌情使用。沒必要一蹴而就，慢慢來，慢慢地把各個知識點擊破。

祝好，qdywxs ♥ you！