在前端开发中，我们常常需要使用不同的单位来实现响应式布局，其中比较常用的是Viewport Height（VH）和REM单位。然而，由于不同浏览器对这些单位的支持程度不同，我们需要使用跨浏览器的JavaScript代码来实现它们的工作。
VH单位的实现
Viewport Height（VH）是指视口高度的百分比，它可以让我们根据用户设备的屏幕大小来调整元素的大小。但是，在一些旧版本的浏览器中，VH单位并不被完全支持，因此我们需要使用JavaScript来进行兼容性处理。
以下是一个实现VH单位的JavaScript函数：
-------- ----------- - --- -- - ------------------ - ----- -------------------------------------------------- ----------- - ------------ --------------------------------- -----------
该函数首先获取当前视口的高度，并将其乘以0.01，得到一个1%的值，然后将其保存为CSS变量'--vh'。接着，通过添加一个resize事件监听器来检测窗口的大小是否发生了变化，从而根据新的窗口尺寸重新设置VH单位的值。
在CSS中，我们可以使用'var(--vh)'来代替实际的VH值，例如：
-------- - ------- -------------- ---- - ----- -
上面的代码将元素的高度设置为视口高度的100%。
REM单位的实现
REM（Root EM）是指相对于根元素字体大小的单位，它可以让我们根据用户设备的字体大小来调整元素的大小。在一些旧版本的浏览器中，REM单位也不被完全支持，因此我们同样需要使用JavaScript来进行兼容性处理。
以下是一个实现REM单位的JavaScript函数：
-------- -------- - --- --- - ----------------- - --- ------------------------------------------------------- ------------ - --------- --------------------------------- --------
该函数首先获取当前窗口的宽度，并将其除以10，得到一个值，然后将其保存为根元素的字体大小。接着，通过添加一个resize事件监听器来检测窗口的大小是否发生了变化，从而根据新的窗口尺寸重新设置REM单位的值。
在CSS中，我们可以使用'rem'来代替实际的REM值，例如：
-------- - ---------- ----- -
上面的代码将元素的字体大小设置为根元素字体大小的两倍。
总结
通过以上的实现，我们可以跨浏览器地使用VH和REM单位来实现响应式布局。需要注意的是，在使用VH和REM单位时，我们应该根据具体的设计需求来选择合适的值，并进行兼容性测试。
本文的示例代码可在以下链接中找到：Github
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15057