理解前端尺寸 rem ,vh , vw , %的本质

rem、百分比、vh、vw各种布局方式,在兼容不同分辨率的时候,究竟采用哪种方式比较好呢?

名词介绍:

百分比:就是元素相对于父级的宽度或高度的百分比,比较常用,宽度和高度都可以

rem:本身是百分比的一种变形,但是这个单位只是基于宽度的百分比,不是基于高度的百分比

vh、vw:基于视口的尺寸,1vh = 1% viewportHeight , 1wh = 1% viewportWidth

计算公式(证明rem本身就是百分比):

假设我们有4:3的屏幕(19201080),还有16:9的屏幕(38402160)。

设:w = 0.3rem,h = 0.3rem;

docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';

在1920*1440的屏幕上:
w = 300px , h = 300px;

w/width = 300/1920 = 15.625%
h/height = 300 / 1440 = 20.8%

在3840*2160的屏幕上:
html根节点上的font-size此时会变成200,扩大了两倍。也就相当于w、h扩大了两倍。
w = 600px , h = 600px;

但是,如果除以各自的基础属性,我们发现百分比没有改变,或者可以理解为,rem的值与视口的宽度,均等比例的放大了。


w/width = (2*300)/(1920*2) 
h/height = (2*300)/ (2*1080) = 27%

结论:

明显,如果使用rem,相当于使用了百分比布局。
在宽度方面,采用rem和百分比都是OK的,
高度方面,不建议采用rem,因为rem是以宽度为基准的。
其实高度也是可以用rem的,因为高度是基于宽度的比例。
理解前端尺寸 rem ,vh , vw , %的本质_第1张图片
当然如果将要适应的屏幕都是等比例放大的,比如2K屏幕,扩展到4K屏幕,那么高度也可以考虑用百分比。

1、无限增长:传统的HTML页面(类似淘宝这样的页面)
解决方案:100%和rem结合起来用。
页面整体布局时,页面容器的高度建议设置为100%,具体到某个元素的高度,他的高度可以通过rem设置。

2、单屏页面:页面高度和屏幕内容显示区域的高度相同(单页展示页面)
考虑用百分比来做宽、高,如果做高度时嫌麻烦,可以使用vw、vh做布局。

用vw的作为单位,在移动端适配性很好。

@function px2vw($n) {
  @return ($n / 7.5) * 1vw;
}

举个栗子
理解前端尺寸 rem ,vh , vw , %的本质_第2张图片

你可能感兴趣的:(HTML5,Web,CSS3)