发布时间：2019-06-19编辑：佚名阅读（2785）
一、vw, vh
vw它是根据可视区的宽度来计算的。
vh它是根据可视区的高度来计算的。
<body>
<style>
body { margin:0; }
.testDiv { width:100vw; height:100vh; font-size:10vw; background:#ccc; }
</style>
<div class="testDiv" ></div>
</body>其中100vw是把.testDiv的宽度设备为充满整个移动设备(浏览器)可视区宽度,100vh是把.testDiv的高度设置为充满整个移动端设备(浏览器)可视区高度。
如果是10vw，就是当前移动设备(浏览器)宽度的十分之一大小；10vh是当前设备(浏览器)高度的十分之一大小
如果是50vw，当前移动端设备(浏览器)可视区宽度的一半，50vh是可视区高度的一半。
font-size:10vw。如果浏览器可视区宽度为640px的话，那么他在640px的时候的字体大小为64px；而在320px的时候字体大小为32px;
测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>test</title>
<style>
body { margin:0; }
.content { width:100%; margin:0 auto; }
.content img { width:100%; }
.testDiv { width:100vw; height:31.25vw; line-height:31.25vw; font-size:4.375vw;
font-family:"宋体"; font-weight:bold; text-align:center; background:#ccc; color:#fff; }
</style>
</head>
<body>
<div class="content">
<div><img src="test.png"/></div>
<div class="testDiv">hello world</div>
</div>
</body>
</html>运行效果：
像这样，就可以做到自适应布局跟自适应字体大小了，不过有个弊端是这时候高度跟宽度都跟随设备大小变化，也跟随浏览器大小变化，不能像响应式布局那样去控制最大宽度，最大高度，跟字体大小。
（这里在布局的时候最好把模拟手机设置的插件的宽度调到跟效果图一样，像上面的布局，效果图是640px，布局的时候就把模拟手机设备的宽度调到了640px）。
该怎么去设置高度、宽度、字体呢？宽度的话直接用百分比都可以，而高度的话，如上图的话高度是200px，用200/640=31.25%，然后用vw代替%号就可以了，字体也是，如上图的字体是28px; 用28/640=4.375%，一样用vw代替%号就行了。
vw, vh兼容性：想较于rem，em会差一些。
0人
2人
0人
1人
