1. 什么是CSS 100vh？
在讨论为什么不应该依赖CSS 100vh之前，我们需要了解什么是CSS 100vh。vh单位表示视口高度的百分比。因此，CSS 100vh将元素的高度设置为视口高度的100％。
height: 100vh;
这使得元素的高度铺满整个屏幕，其在实现全屏效果方面非常有用。
2. 为什么我们不应该仅使用CSS 100vh？
2.1 视口高度的计算
与其他CSS长度单位不同，vh单位的值对视口高度的计算方式具有一定的影响。视口的高度可以因为浏览器的元素（例如地址栏或操作栏）而略微发生变化。因此，视口高度可以在不同的设备上略有不同，这可导致显示效果与设计的不同。
例如，在移动设备上，当用户滚动到页面底部时，工具栏和地址栏可能会自动收起。这会导致视口高度发生变化，并且在这种情况下，使用CSS 100vh来设置元素的高度可能会出现问题。
因此，通过依赖CSS 100vh来设置元素的高度，我们将导致在不同设备上的表现存在差异（即对不同高度的视口设置，CSS 100vh的值并不是相同的）。因此，我们应该使用其他技术确保元素在任何设备上都能够适当地显示和定位。
2.2 移动设备上的屏幕旋转问题
使用CSS 100vh还可能会遇到另一个问题：当移动设备从竖屏模式旋转到横屏模式时，页面的高度会发生变化，但CSS 100vh可能不会自动调整以反映这一变化。这可能导致元素重叠或出现滚动条，破坏用户体验。
因此，当我们希望元素随着设备旋转而自动调整大小和位置时，我们需要使用其他技术来处理这种情况。
2.3 其他问题
除上述问题外，CSS 100vh还可能导致其他问题，如空间滚动和文本截断等。对于那些依赖CSS 100vh的设计来说，这些问题将很难解决，并且可能导致网站的不良用户体验。
3. 替代技术
3.1 flexbox
一个很好的替代方法是使用Flexbox布局。使用Flexbox可以方便地调整元素的大小和位置，而不会受到视口大小或设备旋转的影响。
.container {
display: flex;
justify-content: center;
align-items: center;
}
以上代码将元素垂直和水平居中。
3.2 CSS网格布局
另一个替代方法是使用CSS Grid布局。Grid布局比Flexbox更灵活，并允许我们以更复杂的方式调整元素的大小和位置。
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 1fr 3fr 1fr;
justify-items: center;
align-items: center;
}
以上代码将元素固定在视口的中心。
3.3 JavaScript
如果我们需要实现更复杂的特性或动画效果，我们可以使用JavaScript帮助我们实现。例如，我们可以使用JavaScript检测屏幕大小和设备方向，并相应地调整元素的大小和位置。
使用JavaScript需要更高的技术要求和时间成本，但是它可以帮助我们实现非常高级的功能。
4. 结论
尽管CSS 100vh可以在某些情况下提供便利，但它也可能导致一些问题，例如屏幕旋转、空间滚动和文本截断等。因此，在向我们的网页添加设计元素时，我们应该使用其他的CSS布局技术（例如Flexbox或Grid）来避免这类问题。