通过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

导航

通过vhvw单位替代rem