css3自適應布局單位vw,vh

**

視口單位(viewport units)

什麼是視口？

在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域；而在移動端，它涉及3個視口：layout viewport（布局視口），visual viewport（視覺視口），ideal viewport（理想視口）。

視口單位中的「視口」，桌面端指的是瀏覽器的可視區域；移動端指的就是viewport中的layout viewport。

根據css3規範，視口單位主要包括以下4個：

1.vw：1vw等於視口寬度的1%。

2.vh：1vh等於視口高度的1%。
3.vmin：選取vw和vh中最小的那個。
4.vmax：選取vw和vh中最大的那個。

比如：瀏覽器高度950px，寬度為1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax。

vmin相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin。

calc的語法就是簡單的四則運算，

1 使用「+」、「-」、「」 和 「/」四則運算；

2 可以使用百分比、px、em、rem等單位；

3 可以混合使用各種單位進行計算；

4 表示式中有「+」和「-」時，其前後必須要有空格，如"width: calc(12%+5em)"這種沒有空格的寫法是錯誤的；

5 表示式中有「」和「/」時，其前後可以沒有空格，但建議留有空格。

height: calc(100vh - 290px);

height:-moz-calc(100vh - 290px);
height:-webkit-calc(100vh - 290px);

css3自適應布局單位vw,vh

在pc端，視口指的是在pc端，指的是瀏覽器的可視區域 而在移動端，它涉及3個視口 layout viewport 布局視口 visual viewport 視覺視口 ideal viewport 理想視口 視口單位中的 視口 pc端指的是瀏覽器的可視區域 移動端指的就是viewport中的layou...

css3自適應布局單位vw,vh詳解

什麼是視口？在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域 而在移動端，它涉及3個視口 layout viewport 布局視口 visual viewport 視覺視口 ideal viewport 理想視口 視口單位中的 視口 桌面端指的是瀏覽器的可視區域 移動端指的就是viewport中...

css 自適應布局單位vw,vh

視口單位 viewport units 什麼是視口？在pc端，視口指的是在pc端，指的是瀏覽器的可視區域 而在移動端，它涉及3個視口 layout viewport 布局視口 visual viewport 視覺視口 ideal viewport 理想視口 視口單位中的 視口 pc端指的是瀏覽器的可...