1. css 的單位: px / em / rem / vw / vh / vmax / vmin (7個(gè))
1. px:
????????1. px 是固定的像素, 一旦設(shè)置了就無(wú)法因?yàn)轫?yè)面大小而改變
2. em:
????????1. em 是描述相對(duì)于, 應(yīng)用在當(dāng)前元素的字體尺寸, 所以它也是相對(duì)長(zhǎng)度單位 。 一般瀏覽器字體大小默認(rèn)為 16px, 則 2em == 32px;
????????2. 子元素字體大小的 em 是相對(duì)于父元素字體大小
????????3. 元素的 width/height/padding/margin 用 em 的話, 是相對(duì)于該元素的 font-size
3. rem:
????????1. 根元素 (html) 的 font-size
4. em / rem 的區(qū)別:
????????1. em 相對(duì)于父元素; rem 相對(duì)于根元素 。
5. em / rem 的共同點(diǎn):
????????1. em 和 rem 相對(duì)于 px 更具有靈活性, 他們是相對(duì)長(zhǎng)度單位, 意思是長(zhǎng)度不是定死了的, 更適用于響應(yīng)式布局 。
6. vw:
????????1. viewpoint width, 視窗寬度, 1vw = 視窗寬度的 1%
7. vh:
????????1. viewpoint height, 視窗高度, 1vh = 視窗高度的 1%
8. vmax:
????????1. 當(dāng)前較大的 vw 和 vh 。
9. vmin:
????????1. 當(dāng)前較小的 vw 和 vh 。
10. 注意:
????????1. chrome 設(shè)置的最小字體大小為 12px, 意思就是說(shuō)低于 12px 的字體大小會(huì)被默認(rèn)為 12px?
1. em 使用設(shè)置:
?1. 任意瀏覽器的默認(rèn)字體高都是 16px 。 所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。 那么 12px = 0.75em, 10px = 0.625em 。
2. 為了簡(jiǎn)化 font-size 的換算, 需要在 css 中的 body 選擇器中聲明 Font-size = 62.5%;? ??
????????1. 這就使 em 值變?yōu)?16px*62.5% = 10px, 這樣 12px = 1.2em, 10p x= 1em, 也就是說(shuō)只需要將你的原來(lái)的 px 數(shù)值除以 10, 然后換上 em 作為單位就行了 。
3. 這種技術(shù)需要一個(gè)參考點(diǎn), 一般都是以 <body> 的 “font-size” 為基準(zhǔn) 。
????????1. 比如說(shuō)我們使用 “1em” 等于 “10px” 來(lái)改變默認(rèn)值 “1em=16px”; 這樣一來(lái), 我們?cè)O(shè)置字體大小相當(dāng)于 “14px”時(shí), 只需要將其值設(shè)置為 “1.4em” 。
4. body {font-size: 62.5%; // 10 ÷ 16 × 100% = 62.5%}
5. 真正的計(jì)算公式是: 1 ÷ 父元素的 font-size × 需要轉(zhuǎn)換的像素值 = em值
?2. rem 使用設(shè)置:
1. 在根元素 <html> 中定義了一個(gè)基本字體大小為 62.5% (也就是10px 。 設(shè)置這個(gè)值主要方便計(jì)算, 如果沒(méi)有設(shè)置, 將是以 “16px” 為基準(zhǔn))。
2. html {font-size: 62.5%; // 10 ÷ 16 × 100% = 62.5%}
????body {font-size: 1.4rem; // 1.4 × 10px = 14px}
????h1 { font-size: 2.4rem; // 2.4 × 10px = 24px}
3. 不過(guò)使用單位設(shè)置字體, 可不能完全不考慮 IE 了, 如果你想使用這個(gè) REM, 但也想兼容 IE 下的效果, 你可考慮 “px” 和 “rem” 一起使用, 用 "px" 來(lái)實(shí)現(xiàn) IE6-8 下的效果, 然后使用 “Rem” 來(lái)實(shí)現(xiàn)代瀏覽器的效果
