css3自适应布局单位vw,vh

转自https://www.cnblogs.com/luxiaoxing/p/7544375.html

视口单位(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。
calc的语法就是简单的四则运算&＃xff0c;
1 使用“&＃43;”、“-”、“” 和 “/”四则运算&＃xff1b;
2 可以使用百分比、px、em、rem等单位&＃xff1b;
3 可以混合使用各种单位进行计算&＃xff1b;
4 表达式中有“&＃43;”和“-”时&＃xff0c;其前后必须要有空格&＃xff0c;如"width: calc(12%&＃43;5em)"这种没有空格的写法是错误的&＃xff1b;
5 表达式中有“”和“/”时&＃xff0c;其前后可以没有空格&＃xff0c;但建议留有空格。

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