本文编辑:小秋同学

自适应网站布局为什么我要抛弃rem,改用vw?

小秋同学 12-16 17:01:52 网站教程
摘要: 你还在用rem弹性布局吗?在html文件头部放入一大段压缩过的js代码,是不是让你很难受?来了解下vw吧,能让你的代码更纯粹。简单介绍下rem布局方案rem是css中的长度单位,1rem=根元素html的font-size值。当页面中所有元素都使用r摘要: 你还在用rem弹性布局吗?在html文件头部放入一大段压缩过的js代码,是不是让你很难受?来了解下vw吧,能让你的代码更纯粹。简单介绍下rem布局方案rem是css中的长度单位,1rem=根元素html的font-size值。当页面中所有元素都使用r

你还在用rem弹性布局吗?在html文件头部放入一大段压缩过的js代码,是不是让你很难受?来了解下vw吧,能让你的代码更纯粹。

简单介绍下rem布局方案

rem是css中的长度单位,1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时,你只需要改变根元素font-size值,所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码,根据屏幕宽度改变html的font-size值,就可以做到弹性布局。这种方法确实便捷,兼容性也很好,是目前非常主流的弹性布局方案。但这种方案有弊端(弊端之一:和根元素font-size值强耦合,系统字体放大或缩小时,会导致布局错乱;弊端之二:html文件头部需插入一段js代码 ),本文将介绍一种更优秀纯粹的方案。

vw单位实现弹性布局

  • 我们先来看看这vw vh单位 w3c的官方解释 

vw:1% of viewport’s width 

vh:1% of viewport’s height

  • viewport即浏览器可视区域大小 

我们可以这样理解 100vw = window.innerwidth, 100vh = window.innerheight 

在移动端我们一般都可以认为,100vw就是屏幕宽度。若使用vw布局,就不需要再像rem那样,在js中去动态设置根元素的font-size了,sass中只需要使用这个函数做转换即可

自适应网站布局为什么我要抛弃rem,改用vw?(图1) CSS
//以iphone7尺寸@2x 750像素宽的视觉稿为例@function vw($px) {
    @return ($px / 750) * 100vw;}//假设一个div元素在视觉稿中,宽度为120px,字体大小为12px
div {
    width: vw(120);
    font-size: vw(12);}

vw单位和百分比%单位对比

  • 那么100vw和我们平时用的width:100%有什么区别呢?

  1. 百分比%是根据父元素宽度或者高度进行计算,而vw vh固定按照viewport来计算,不会受父元素宽高度影响。

  2. 100vw包括了页面滚动条宽度(页面滚动条属于viewport范围内,100vw当然包括了页面滚动条宽度)。但把body或者html设置为width:100%时,是不包括页面滚动条的宽度的。也就是说100vw在有纵向滚动条的情况下,会比100%宽。 那么就会引发一个问题:pc端使用vw单位时,如果页面内容超出一屏长度,出现了纵向滚动条,同时有元素width:100vw, 则会导致出现条横向滚动条,因为元素(100vw + 滚动条宽度)超出了viewport宽度。(移动端滚动条不占位,所以不会有这个问题)不过pc端一般不需要弹性布局,还是尽量使用width:100%更保险。

为何rem布局比vw主流?兼容性

既然rem布局有弊端,与font-size强耦合会引发副作用,vw布局相较之下更纯粹代码逻辑也更清晰,为何移动端rem布局比vw主流?我们来看看vw和rem的兼容性。 

自适应网站布局为什么我要抛弃rem,改用vw?(图2)

自适应网站布局为什么我要抛弃rem,改用vw?(图3)

相较之下,vw单位兼容性比rem稍差,ios8、安卓4.4及以上才完全支持。这也是为什么之前rem布局一直更流行的原因。

总结

目前ios8、安卓4.4以下的用户已经非常少了,caniuse上面显示,在中国这部分用户只有1.2%,比例已经非常低了,而这部分用户的手机估计只会打打电话不会使用互联网的(还是需根据各自产品的用户数据分析来决定是否使用vw)。如果你的页面只适用于微信、qq,那绝对能放心使用vw单位,还可以配合vh针对一些特殊比例屏幕做处理,彻底摆脱使用rem带来的副作用,删掉html头部计算font-size的那段js代码,让你的代码更纯粹。


文章版权及转载声明:

编辑:小秋同学本文地址:https://qiuhai.com/study/245.html发布于 12-16 17:01:52
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论
加载中~