javascript - 当页面达到 820px 时，使所有 HTML 标签忽略浏览器响应

Question

我在我的 HTML 中使用使用 vw( View 宽度)和 vh( View 高度)作为其 css 宽度和高度值的标签。

一旦浏览器达到一定宽度(820px 或更小)，我希望所有标签都保留在原位。我想基本上“卡住”该宽度的网站。

我尝试使用媒体查询，将所有标签的容器设置为宽度 820 像素。它确实达到了我想要的效果，但是当我缩小网站时，所有使用 vw 的标签仍在缩小。

有没有办法在不必更改我所有的 vw/vh 值的情况下停止这种效果？

非常感谢!

Answer 1

对于任何尺寸为 vw 的元素，您需要在您希望它停止收缩的位置设置一个 min-width。例如:

.container {
   min-width: 820px
   width: 100vw;
   height: 100vh;
}