rem 与 vw 适配方案
2019-05-26 本文已影响0人
龚达耶
在做移动端适配的同学们都应该知道我们都是用rem布局做移动端适配但是过了这么多年了，vw的兼容性已经很好了，现在我们可以直接切换到vw了。
首先 rem r就是root意思，始终跟着body的字体大小变动，不跟随父元素改动而改动
设置<meta name="viewport" content="xxx">（可以根据dpr缩放viewport，也可以直接使用1倍的视口大小）
<body style="font-size:10px">
<div style="font-size:2rem">此时的字体大小是20px</div>
<span style="font-size:4rem">此时的字体大小是40px</span>
</body>
vh vw
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；而%单位则是依赖于元素的祖先元素。
用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）
例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。
所以有了这个单位，根本不需要为了不同宽度的设备做不同的 rem 宽度设置，也不需要用 JS 去算 1% 设备屏幕宽度是多少 px 然后设置给 rem。
按照一般情况下我们可以根据设计稿使用sass
需要sass入门的同学可以看我sass的文章
//以iphone7尺寸@2x 750像素宽的视觉稿为例
@function vw($px) {
@return ($px / 750) * 100vw;
}
//假设一个div元素在视觉稿中，宽度为120px，字体大小为12px
div {
width: vw(120);
font-size: vw(12);
}
同时我们也可以使用京东的方案 vw+rem的布局方式，元素布局上依然使用rem单位，没有缩放viewport, html元素的font-size则使用vw + px fallback的形式，并且使用media query来限制布局宽度
image.png
