html - 带有vmin和移动地址栏的自适应设计

我试图彼此之间创建多个正方形div(如果文本过多，则高度可以扩展。但是大多数情况下，文本不会过多)。我正在尝试以响应方式进行设置。

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

我的HTML代码中包含以下视口行:

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

我的代码如下所示:

.block {
        width: 80vmin;
        min-height: 80vmin;
        margin: 5% auto;
        border-radius: 15vmin;
        padding: 20px 10px;

}

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

有没有办法让vmin忽略地址栏并假装它不存在？如果没有，我还需要其他哪些解决方案？

最佳答案

Chrome从不良的UX版本开始添加了仅在隐藏地址栏后才计算vh，vmin等值的功能。这样，浏览器就不会对它们进行太多计数，并且fps不会下降，但是会出现jumping效果。

如果我是我，我会使用网格。您可以使用min-content的高度，并且每行中的框将独立地位于相同的高度。使用repeat，auto-fill和minmax可以添加尽可能多的框，而无需在移动查询中添加额外的CSS。 (@media ...)

编辑:

注释示例:

main {
  display: grid;
  grid-auto-rows: min-content;
  /* to each row same height:
  grid-auto-rows: 1fr; */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* to center:
  justify-items: center;
  align-items: center; */
}

<main>
  <div>Hello</div>
  <div><img src="http://via.placeholder.com/100x150/000000"></div>
  <div><img src="http://via.placeholder.com/100x150/000000"></div>
  <div>World</div>
  <div>Hello</div>
  <div>World</div>
</main>

关于html - 带有vmin和移动地址栏的自适应设计，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50634272/