通过vhvw单位替代rem

解决响应式布局问题

先介绍下 rem吧

规范中写道:

Equal to the computed value of ‘font-size’ on the root element.

「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢?

根据根元素字体来自动调节大小(自适应)

这种方法确实便捷,兼容性也很好,是目前非常主流的弹性布局方案。但这种方案有弊端

弊端之一:和根元素font-size值强耦合,系统字体放大或缩小时,会导致布局错乱;

弊端之二:html文件头部需插入一段js代码 (根据屏幕改变html字体大小)


vw单位实现弹性布局

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

vw:1% of viewport’s width 
vh:1% of viewport’s height

vw:是相对于视窗宽度的单位,100vw为浏览器视窗的总宽度,也即相对于html的width:100%。

vh:是相对于视窗高度的单位,100vh为浏览器视窗的总高度,也即相对于html的height:100%。


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

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

//以iphone7尺寸@2x 750像素宽的视觉稿为例
@function vw($px) {
    @return ($px / 750) * 100vw;
}

//假设一个div元素在视觉稿中,宽度为120px,字体大小为12px div {     width: vw(120);     font-size: vw(12); }


使用场景

在之前的资料查阅中,一直未发现这两个单位的原因在于:

之前这两个单位仍不算是完美兼容,介绍的帖子较少;

一般很少有y方向不向下延伸的页面,因此y方向的自适应意义不大,但真正需要的时候就迷茫了。

在某些项目中,可能像我一样需要整个页面的全屏展示和分辨率适应,此时vw和vh就体现出它们的价值:

这是一个相对单位,相对于px而言,无需多言有其自适应的优势;

相对于百分比宽高和em而言,使用更为简便。

周知%是相对于其父级元素而言,而如果嵌套关系较多,或涉及margin、padding、定位等使用较多的情况时,都使用百分比会因为参考元素不同而较为混乱,或也可以实现效果但很不直观(同样是1%,长度可能天差地别)。

而使用em时,无法在是/否全屏显示这两种效果下达成较为完美的平衡(因为对于大多数浏览器而言,F11前后只改变了高度而宽度未改变,此时x向布局几乎无影响,而y向布局会“深受其害”)。而使用vw和vh分别作为x向和y向的长度单位,即可实现浏览器宽高改变时,等比例的放缩页面元素,实现较为初级的自适应。

问题

在使用中,仍有一些问题需要解决,在此记录。

字体大小没想好使用vw还是vh较好;

再结合min-width、min-height可实现更好的效果,还未测试;

只是等比例放缩,也许并不适用于大多数页面,或许bootstrap等框架更好(还不会用…)

来源

https://blog.csdn.net/huangm_fat/article/details/80090245

https://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

https://blog.csdn.net/weixin_43930186/article/details/84951204

发表评论

请先登陆