前言
在手机端开发中，我们经常需要使用到虚拟单位 vh 和 vw 来做页面布局和响应式设计。但是，由于浏览器的版本和兼容性问题，vh 和 vw 在某些情况下会出现异常表现，导致页面出现不可预料的问题。
为了解决这个问题，我们可以使用名为 vh-for-mobile 的 npm 包，这个 npm 包可以让我们在移动端使用虚拟单位更加稳定，同时也可以加速布局的开发。在这篇文章中，我们将会详细介绍 vh-for-mobile 的使用教程。
安装 npm 包
在使用 vh-for-mobile 之前，我们需要先安装该 npm 包。安装方法如下：
npm install vh-for-mobile --save
使用 --save 参数可以将该包安装到当前项目的依赖列表中。
用法示例
接下来我们将给出一个简单的示例代码来演示 vh-for-mobile 的用法。我们假设要做一个占据屏幕高度 80% 的页面，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------- ------------
-------
----- ---- -
------- --
-------- --
------- -----
-
----------- -
------- ----- -- -- -- -- --
----------------- --------
-
--------
-------
------
---- -------------------------
-------
-------上述代码中，我们使用原生的 vh 做了一个占据屏幕高度 80% 的页面。但是，当我们用手机浏览器打开该页面时，往往会出现错位或布局崩溃的情况，因为手机浏览器在解析 vh 单位时存在兼容性问题。
现在，我们来使用 vh-for-mobile 来解决这一问题。方法如下：
首先，我们需要在 HTML 中引入 vh-for-mobile 的 CSS 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------- ------------
----- ---------------- ---------------------------------------------------------- --
-------
------
---- -------------------------
-------
-------接下来，我们需要用 vhm- 前缀替换所有的 vh 单位，修改代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------- ------------
----- ---------------- -------------------------------------------------
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------