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。
还没有内容