rem + vw 布局
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>
http://www.jscss.cc/2016/10/05/layout3.html
