vw
css3新单位,view width的简写,是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px
举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
vh
css3新单位,view height的简写,是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px
举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。
vm
css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。
关于height:100%和height:100vh的区别
vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,
但是设置height:100vh,该元素会被撑开屏幕高度一致。
css图片按比例缩放不变形
<img style="max-width:80px;max-height:80px;">
<img style="max-width:80%;max-height:80%;width:auto;">
宽度或高度中较小的那个会生效,使其不会超过框格