網站開發進階（六十六）CSS3 - 新單位vmin/vmax與舊單位ex/ch使用詳解

前言

vw、vh、vmin、vmax 的含義

（1）vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似于 1%。

視窗(Viewport)是瀏覽器實際顯示內容區域，換句話說是不包括工具欄和按鈕的網頁瀏覽器。

（2）具體描述如下：

vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）

vh：視窗高度的百分比

vmin：當前 vw 和 vh 中較小的一個值

vmax：當前 vw 和 vh 中較大的一個值

（3）基本說明

vw、vh 與 % 百分比的區別

（1）% 是相對于父元素大小設定的比率，vw、vh 是視窗大小決定的。

（2）vw、vh 優勢在于能夠直接獲取高度，而用 % 在沒有設置 body 高度的情況下，是無法正確獲得可視區域的高度的，所以這是挺不錯的優勢。

vmin、vmax 用處

做移動頁面開發時，如果使用 vw、wh 設置字體大小（比如 5vw），在豎屏和橫屏狀態下顯示的字體大小是不一樣的。

由于 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。

vmin 和 vmax

在前期博文中，我們講解了vh和vm的相關知識，vh和vm總是與視口的高度和寬度有關，與之不同的，vmin和vmax是與這次寬度和高度的最大值或最小值有關，取決于哪個更大和更小。例如，如果瀏覽器設置為1100px寬、700px高，1vmin會是7px,1vmax為11px。然而，如果寬度設置為800px，高度設置為1080px，1vmin將會等于8px而1vmax將會是10.8px。

應用場景？

當需要一個總是在屏幕上可見的元素。使用高度和寬度設置為低于100的vmin值將可以實現這個效果。例如，一個正方形的元素總是至少接觸屏幕的兩條邊可能是這樣定義的：

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

1

2

3

4

如果你需要一個總是覆蓋可視窗口的正方形(一直接觸屏幕的四條邊),使用相同的規則只是把單位換成vmax。

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

1

2

3

4

這些規則的組合提供了一個非常靈活的方式，用新的、令人興奮的方式利用可視窗口的大小。

應用示例：實現 Word 文檔頁面效果

實現效果：

（1）使用 vh 單位，我們可把 web 頁面做得像 Office 文檔那樣，一屏正好一頁。改變瀏覽器窗口尺寸，每頁的大小也會隨之變化。

（2）拖動滾動條，我們可以一直往下看到最后一頁。

歡迎訪問 hangge.com

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

ex 和 ch

ex和ch單位，與em和rem相似，依賴于當前字體和字體大小。然而，與em和rem不同的是，這兩個單位也依賴于font-family，因為它們被定為基于特殊字體的法案。

ch單位基本概念是，給定一個等寬字體的字體，一個N個字符單位寬的盒子，比如width：40ch;,可以一直容納一個有40個字符的應用那個特定字體的字符串。雖然這個特殊規則的傳統用途與列出盲文有關，但是這里創造性的可行性一定會超越這些簡單的用途。

ex單位被定義為"當前字體的x-height或者一個em的一半"。給定字體的x-height是指那個字體小寫x的高度。通常，這是這個字體的中間的標志。

對于這種單位有很多的用途，大多數是用于排版的微調。例如，sup元素,代表上標，可以用相對定位和一個1ex的底部值在行內被推高。類似地，你可以拉低一個下標元素。瀏覽器默認支持這些利用上標和下標特性的vertical-align規則，但是如果你想要更精細的控制，你可以像這樣更明確的處理樣式：

sup { position: relative; bottom: 1ex; } sub { position: relative; bottom: -1ex; }

1

2

3

4

5

6

7

8

ex單位在CSS1中已經存在，但是你不會找到對ch單位有像這樣堅實的支持。

拓展閱讀

《Vue進階（幺陸捌）：前端用戶體驗提升（三）應用vw/vh實現自定義布局》

《Vue進階（幺柒零）：前端用戶體驗提升（四）應用rem/em實現字體自適應》

CSS 云速建站 網站

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。