在前端开发中，不少情况下需要根据视口大小来设置元素的高度或宽度，在过去，我们可能需要使用 JS 来获取视口高度或宽度并设置 CSS，不过 CSS3 新增了一个单位 vh，可以非常方便地设置高度，但是目前为止该单位不被所有浏览器支持，怎么办呢？
这时候就可以借助开源的 npm 包 css3-vh 来解决该问题，本文将详细介绍该包的使用方式。
1. 安装
npm install css3-vh
2. 使用
2.1 引入
在需要使用的样式文件中引入 css3-vh：
@import '~css3-vh';
2.2 设置
在需要设置高度或宽度的元素中，使用 vh 单位并按照比例设置，例如视口高度为 1000px，需要设置元素高度为视口高度的一半，则设置样式如下：
.element {
height: 50vh;
}2.3 配置
在使用 css3-vh 时，可以通过配置文件来设定比例值，如果不设定，则默认为 100 / innerHeight。
在项目根目录下新建 css3-vh.config.js 文件，如下所示：
module.exports = {
scale: 0.01,
// 其他配置项...
};其中，scale 是周期的一半（即 100vh 最终对应的高度）占视口高度的百分比。
3. 示例代码
HTML：
<div class="container"> <div class="content">按照视口高度的一半设置元素高度</div> </div>
CSS：
-- -------------------- ---- ------- ---------- - ------- ------ - -------- - ------- ----- ------------ ----- ----------- ------- ------ ----- ----------------- ----- -
4. 总结
本文介绍了 npm 包 css3-vh 的使用方式，通过使用该包可以更加方便地根据视口大小来设置元素高度或宽度，提升开发效率。同时也可以通过配置文件来设定比例值，更加灵活地控制样式。
希望本文能够对前端开发者们有所帮助，为大家的开发工作提供一些指导和参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560da81e8991b448df1d4