Html 具有vmin和移动地址栏的响应式设计

我正在尝试创建一些相邻的方形div（如果文本太多，它们可以在高度上展开..但大多数情况下不会有太多文本）。我正试图以一种反应灵敏的方式来设置它

在页面上滚动时，我的手机浏览器中的地址栏不断出现和消失。当手机处于横向模式时，每次打开或关闭地址栏时，尺寸都会发生变化。这创造了一个非常烦人的用户体验

我的HTML代码中有以下视口行：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

显然，罪魁祸首是vmin组件。如果我没有指定vmin，则在横向模式下查看时，框太大

---

有没有办法让vmin忽略地址栏并假装它不在那里？如果没有，我还有什么其他选择来解决这个问题

从坏用户体验开始，Chrome添加了只在隐藏地址栏后计算

vh

、

vmin

等值的功能。这样，浏览器就不会对它们进行过多次计数，fps也不会下降，但会出现

跳跃
效果

如果我是你，我会使用网格。您可以使用
min content
height，并且每行中的框将独立地保持相同的高度。使用
repeat
，
auto fill
和
minmax
可以添加尽可能多的框，而无需通过移动查询添加额外的css。（
@media…
）

编辑：

评论示例：


main{
显示：网格；
网格自动行：最小内容；
/*对于每行相同高度：
网格自动行：1fr*/
网格模板列：重复（自动填充，最小值（200px，1fr））；
/*要居中：
证明项目：中心；
对齐项目：居中*/
}

你好
世界
你好
世界
你（可能）是一个受害者，因为你认为
vh
变化也是
vmin
变化的原因

可能的解决办法：

使用Javascript并手动设置大小
使用
vmax
结合
纵横比
媒体查询来估计
vmin

（感觉有点老套，但很可能实现您想要的）
首先要防止地址栏隐藏：
首先防止地址栏显示：全屏显示：

试试

使用网格代替sugested（可能是最好的）
感谢您让我意识到
vmin
和
vmax
的存在。您能否提供一个示例，说明“您可以使用最小内容高度，而框的高度将相同”的意思。这看起来很神奇。我使用了带有旋转的CSS动画，它总是使屏幕缩小。使用这个
meta
标签可以让它表现得更好！
.block {
        width: 80vmin;
        min-height: 80vmin;
        margin: 5% auto;
        border-radius: 15vmin;
        padding: 20px 10px;

}