CSS3的vw和vh視口單位
阿新 • • 發佈:2019-01-29
認識視口單位( Viewport units )首先,我們要了解什麼是視口。在業界,極為推崇的一種理論是 Peter-Paul Koch (江湖人稱“PPK大神”)提出的關於視口的解釋——在桌面端,視口指的是在桌面端,指的是瀏覽器的可視區域;而在移動端較為複雜,它涉及到三個視口:分別是 Layout Viewport(佈局視口)、 Visual Viewport(視覺視口)、Ideal Viewport。而視口單位中的“視口”,在桌面端,毫無疑問指的就是瀏覽器的可視區域;但是在移動端,它指的則是三個 Viewport 中的 Layout Viewport 。視口單位中的“視口”·根據CSS3規範 ,視口單位主要包括以下4個: ios 8 以上以及 Android 4.4 以上獲得支援,並且在微信 x5 核心中也得到完美的全面支援。
- vw : 1vw 等於視口寬度的1%
- vh : 1vh 等於視口高度的1%
- vmin : 選取 vw 和 vh 中最小的那個
- vmax : 選取 vw 和 vh 中最大的那個