css【vw,vh】进行自适应布局单位

在进行CSS3自适应布局&＃xff0c;会用到 vw 和 vh 进行布局

视口单位(Viewport units)

什么是视口&＃xff1f;

在桌面端&＃xff0c;视口指的是在桌面端&＃xff0c;指的是浏览器的可视区域&＃xff1b;而在移动端&＃xff0c;它涉及3个视口&＃xff1a;Layout Viewport&＃xff08;布局视口&＃xff09;&＃xff0c;Visual Viewport&＃xff08;视觉视口&＃xff09;&＃xff0c;Ideal Viewport&＃xff08;理想视口&＃xff09;。

视口单位中的“视口”&＃xff0c;桌面端指的是浏览器的可视区域&＃xff1b;移动端指的就是Viewport中的Layout Viewport。

根据CSS3规范&＃xff0c;视口单位主要包括以下4个&＃xff1a;

1.vw&＃xff1a;1vw等于视口宽度的1%。

2.vh&＃xff1a;1vh等于视口高度的1%。

3.vmin&＃xff1a;选取vw和vh中最小的那个。

4.vmax&＃xff1a;选取vw和vh中最大的那个。

vh and vw&＃xff1a;相对于视口的高度和宽度&＃xff0c;而不是父元素的&＃xff08;CSS百分比是相对于包含它的最近的父元素的高度和宽度&＃xff09;。1vh 等于1/100的视口高度&＃xff0c;1vw 等于1/100的视口宽度。

比如&＃xff1a;浏览器高度950px&＃xff0c;宽度为1920px, 1 vh &＃61; 950px/100 &＃61; 9.5 px&＃xff0c;1vw &＃61; 1920px/100 &＃61;19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

vh/vw与%的区别&＃xff1a;