VW

viewpoint width,视窗宽度,1vw = 视窗宽度的1%
vw 是根据 devicewidth 来进行大小设置的

caniuse 中查询到的兼容性 可以看到对 android 的兼容性不那么好, 只兼容到 4.4 后的版本

看过上一篇 rem 布局 的就知道移动端布局为了适应各个设备的大小, 使用 rem 能做到各个设备的适应, 但是使用 rem 需要对 html 的 fontsize 做计算, 而这个计算的一个关键点是获取 devicewidth, 这里 100vw 就等于 devicewidth, 这时候如果把这个计算公式放到 css 去做是不是会完美了。因为为了获取 devicewidth 不得不使用 js, 而 vw 的出现能解决这个问题, 因为 100vw = devicewidth。

计算逻辑

公式 一
100vw = devicewidth;
假设 devicewidth = 320; 320 / 6.4 = 50;
50 / (320 / 100) = 15.625;
结果 : html fontsize = 15.625vw;
公式 二
第一个 100 是 100vw = devicewidth
640 是设计稿宽度
第二个 100 是 100基数
100 / (640/100) = 15.625vw;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Rem</title>
<meta name="viewport" content="width=devicewidth, initialscale=1.0,maximumscale=1.0, userscalable=no"/>
<style type="text/css">
	html{
		/* 把固定的结果写上, 浏览器会跟进不同的设备宽度得道不同的大小 */
		font-size: 15.625vw;
	}
	body{
		width: 6.4rem;
		font-size: 0.32rem; /* iphon5 中为 16px */
	}
</style>
</head>
<body>
<div id="main">
  <p>计算元素大小公式  量出设计稿大小</p>
  <p>假设量出某个元素的高度为 80px </p>
  <p>height = 80 / 100 = 0.8rem </p>
</div>
<script>
	+function(){
		function main(){
			var width = document.getElementsByTagName("body")[0].clientWidth;
			document.getElementById("main").innerHTML = "body 的宽度为 : "+width+"px";
		}
		main();
		//监听 onresize
		window.addEventListener("resize", function(){
			main();
		});
	}();
</script>