vw 和 rem 是什么?怎么使用?

  • vw

简单来说 vw 是视口单位,相当于把视口等分成了100,1vw = 1;

  • re

rem是相对单位,设置根元素 html 的 font-size,比如给 html 设置字体大小为100px,1rem = 100px;

 相对长度单位,不过em是根据父元素的font-size来进行转变的。

例如,下面代码父元素.parent字体大小为12px,子元素.son的宽高为1rem(即:1em = 12px;)

   <div class="parent" style="font-size: 12px;">
        <div class="son" style="width: 1em;height: 1em;"></div>
     </div>

首先你需要知道rem是指页面根元素的字体大小,即html的font-size,默认情况下,html的font-size是16px,相当于1rem = 16px;

但有一种情况需要考虑,即:如果rem被改变时。比如你引入的第三方UI组件或插件中设置了html的font-size:100px;

那么此时的1rem = 100px;会覆盖浏览器默认的1rem = 16px; 如果引入第三方UI组件或插件单位用的px,还需要全部转换成rem

为什么要使用vw+rem?

在不了解vw+rem之前,仿站写移动端写自适应页面常常无从下手。

如果所有元素的大小都设置成html或body大小的一个百分比,理论上的确可以在不同的设备上实现自适应。但是事与愿违,并非所有情况都可以设置百分比,比如浮动元素会脱离文档流,父级元素必须预先确定高度才能设置高度百分比。

  • 百分比布局的缺点:

宽度虽然能随屏幕自适应,但高度固定不变,当设备屏幕越来越大,会有一种被强行拉伸的既视感,用户体验差

  • 媒体查询的缺点:

CSS 代码量增多,体积增大,要为每一个不同分辨率的设备单独写一套样式来自适应。

在这种情况下,rem 的出现无异于黑暗中的一道曙光,不过它也有一个缺点

  • rem的缺点:

需要引入一段JS代码,这样违背了样式行为分离的思想,而且耦合深,无法解耦

使用 vw,不需要引入 JS 代码就能达到比 rem 更好的效果,并且相对于视口,所以在宽屏上也能很好的显示

  • vw的缺点:

vw 虽然好用,但却因为相对于视口,所以失去了最大宽度/高度的限制,可能在宽屏上看到完美,竖屏上就不忍直视了。这时需要你额外为元素添加最大宽度/高度来限制

说了这么多缺点,依靠单独一种方法不行,可以结合起来使用:vw + rem。

简单介绍

1、我们以 iPhone6为基准,屏幕宽度为375px,然后换算成 vw

375 / 100 = 3.75;

注:vw 是视口单位,被均分成了100,1vw = 1,所以根据上面计算,1vw = 3.75px

2、一般使用 rem 会给 html 的 font-size 设置大小为 100px,因为方便计算,这里需要把100px 换算为 vw

100 / 3.75 = 26.6666666vw;    

 注:上面结果能最大限度减少像素偏差,经测试,若值舍五入为27vw或26vw都会有1-2像素的偏差

此时表面上看html的font-size被设置为26.6666666vw,但实际html的font-size为100px,1rem = 100px

元素的值还是用rem,而不是用vw,这么说可能有点绕,运行下面demo在iPhone6下查看就会明白了

示例如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style>
        html {
            font-size: 26.6666666vw;
        }
        div {
            margin: 0.2rem auto;
            width: 3rem;
            height: 0.3rem;
            line-height: 0.3rem;
            color: #fff;
            font-size: 0.16rem;
            text-align: center;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div>我是第一</div>
    <div>我是第二</div>
    <div>我是第三</div>
</body>
</html>

输出结果:

我是第一

我上第二

我是第三

 

注:上面div的 font-size 我用的 rem,没用px,主要想让demo效果更明显。

在实际项目中,有时并不想让字体随设备屏幕变大而变大,可根据项目需求选择为 font-size 设置 rem 还是 px。