rem + vw 布局

最新推荐文章于 2024-05-16 13:18:18 发布

weixin_33690963

最新推荐文章于 2024-05-16 13:18:18 发布

阅读量151

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/keepLeung/p/6856516.html

版权

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>