跨浏览器JavaScript实现VH和REM单位的工作

在前端开发中，我们常常需要使用不同的单位来实现响应式布局，其中比较常用的是Viewport Height（VH）和REM单位。然而，由于不同浏览器对这些单位的支持程度不同，我们需要使用跨浏览器的JavaScript代码来实现它们的工作。

VH单位的实现

Viewport Height（VH）是指视口高度的百分比，它可以让我们根据用户设备的屏幕大小来调整元素的大小。但是，在一些旧版本的浏览器中，VH单位并不被完全支持，因此我们需要使用JavaScript来进行兼容性处理。

以下是一个实现VH单位的JavaScript函数：

function setHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

setHeight();
window.addEventListener('resize', setHeight);

该函数首先获取当前视口的高度，并将其乘以0.01，得到一个1%的值，然后将其保存为CSS变量'--vh'。接着，通过添加一个resize事件监听器来检测窗口的大小是否发生了变化，从而根据新的窗口尺寸重新设置VH单位的值。

在CSS中，我们可以使用'var(--vh)'来代替实际的VH值，例如：

.element {
  height: calc(var(--vh, 1vh) * 100);
}

上面的代码将元素的高度设置为视口高度的100%。

REM单位的实现

REM（Root EM）是指相对于根元素字体大小的单位，它可以让我们根据用户设备的字体大小来调整元素的大小。在一些旧版本的浏览器中，REM单位也不被完全支持，因此我们同样需要使用JavaScript来进行兼容性处理。

以下是一个实现REM单位的JavaScript函数：

function setRem() {
  let rem = window.innerWidth / 10;
  document.documentElement.style.setProperty('font-size', `${rem}px`);
}

setRem();
window.addEventListener('resize', setRem);

该函数首先获取当前窗口的宽度，并将其除以10，得到一个值，然后将其保存为根元素的字体大小。接着，通过添加一个resize事件监听器来检测窗口的大小是否发生了变化，从而根据新的窗口尺寸重新设置REM单位的值。

在CSS中，我们可以使用'rem'来代替实际的REM值，例如：

.element {
  font-size: 2rem;
}

上面的代码将元素的字体大小设置为根元素字体大小的两倍。

总结

通过以上的实现，我们可以跨浏览器地使用VH和REM单位来实现响应式布局。需要注意的是，在使用VH和REM单位时，我们应该根据具体的设计需求来选择合适的值，并进行兼容性测试。

本文的示例代码可在以下链接中找到：Github

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15057