引用文档：http://caibaojian.com/vw-vh.html；
http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/；
http://blog.csdn.net/ZNYSYS520/article/details/76053961
周六和同事讨论问题时，突然聊到了vw和vh，今天整理了一下vw和vh的一些小知识点吧，日后可以自己复习的时候看看。
什么是viewport?
视窗的概念在浏览器端指的是浏览器的可视区域；而在移动端则相对复杂，它涉及到3个视口：Layout Viewport(布局视口),Visual Viewport(视觉视口)、Ideal Viewport(虚拟视口),在移动端指的是Layout Viewport
什么是vw，vh，vmax,vmin？
vw,vh,vmax,vmin是一种视窗单位，同时也是一种相对单位；它们相对的是视窗（viewport）的大小；单位1，代表相对于视窗大小的1%；
vw:1vw代表视口宽度的1%；
vh:1vh代表视口高度的1%;
vmax:选取vw/vh中最大的一个；
vmin：选取vw/vh中最小的一个；
与百分比%的区别
百分比%相对于其父元素或者其祖先元素的宽度/高度；
vw/vh相对于视窗大小的宽度/高度；vw/vh的优势在于能够直接获取高度，而百分比%则需要在设置body的高度
vmax、vmin的用处
在做移动端开发时，如果使用vw、vh设置字体大小时，在横屏和竖屏情况下是不一样大的；vmax和vmin是当前较大的vw和vh和当前较小的vw和vh，这种情况下，可以设置让字体在横竖屏现实的大小一样。
兼容性
PC端：
Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）
移动端：
Andriod:自4.4版起就完美支持；
iOS：自ios8起支持
实例展示:
1、vw和vh的简单示例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>视窗vw/vh的使用</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html { font-size: 2vw; } .container { width: 100vw; border: 1px solid #ddd; } .container .textPart { font-size: 2vw; } .container img { width: 100vw; } .colorBox { border: 1px solid #dddddd; display: flex; margin-bottom: 10vh; } .colorBox .redBox { width: 40vw; height: 40vh; background-color: #ee4433; } .colorBox .blueBox { width: 6vw; height: 60vh; background-color: deepskyblue; } .colorBox .grayBox { width: 4vw; height: 40vh; background-color: gray; } </style> </head> <body> <div class="container"> <img src="http://jdc.jd.com/img/750x340" alt="图片"> <p class="textPart"> 图片介绍：Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci debitis nobis magni necessitatibus molestias pariatur? Beatae consequuntur fugit amet, unde maiores, eaque a dignissimos, quaerat vero deserunt excepturi dolorum. Tempora? </p> </div> <div class="colorBox"> <div class="redBox">红色盒子</div> <div class="blueBox">蓝色盒子</div> <div class="grayBox">灰色盒子</div> </div> </body> </html>2、vw、vh、rem的搭配使用实例代码（这样使布局更优化）
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>rem和vw搭配使用</title> </head> <body> <div class="container"> <img src="http://jdc.jd.com/img/750x340" alt="图片"> <p class="textPart"> 图片介绍：Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci debitis nobis magni necessitatibus molestias pariatur? Beatae consequuntur fugit amet, unde maiores, eaque a dignissimos, quaerat vero deserunt excepturi dolorum. Tempora? </p> </div> <div class="colorBox"> <div class="redBox">红色盒子</div> <div class="blueBox">蓝色盒子</div> <div class="grayBox">灰色盒子</div> </div> </body> </html>CSS代码
html { font-size: 16px; } @media screen and (min-width: 375px) { html { /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */ font-size: calc(85.8974359%); font-size: calc(1.8974359px); } } @media screen and (min-width: 414px) { html { /* 414px-1000px每100像素宽字体增加1px(18px-22px) */ font-size: calc(110.35665529%); font-size: calc(15.85665529px); } } @media screen and (min-width: 600px) { html { /* 600px-1000px每100像素宽字体增加1px(20px-24px) */ font-size: calc(120%); font-size: calc(15px); } } @media screen and (min-width: 1000px) { html { /* 1000px往后是每100像素0.5px增加 */ font-size: calc(132.1%); font-size: calc(16.6px); } } .container img { width: 100%; border: 1px solid #ee4433; } .container .textPart { font-size: 1rem; } .colorBox { border: 1px solid #ddd; display: flex; justify-content: space-between; } .colorBox .redBox { width: 11rem; height: 8rem; background-color: #ee4433; } .colorBox .blueBox { width: 6rem; height: 8rem; background-color: deepskyblue; } .colorBox .grayBox { width: 4rem; height: 8rem; background-color: gray; }
转载于:https://www.cnblogs.com/bllx/p/8594157.html
