使用vmin和移动地址栏进行响应式设计

Question

我试图创建一些旁边的方形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忽略地址栏并假装它不存在？如果没有,我还有什么其他选择来解决这个问题？

Answer 1

镀铬的坏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>

Answer 2

你(可能)是CSS3 100vh的受害者,在移动浏览器中不是常数,假设vh改变也是改变的原因vmin.

可能的解决方案:

1. 使用Javascript并手动设置大小
2. 使用vmax结合aspect-ratio媒体查询来估算vmin
   (认为哈克,但最有可能完成你想要的)
3. 防止地址栏隐藏在第一位:https://stackoverflow.com/a/33953987/2422125
4. 防止地址栏出现在第一位:全屏:
   如何使<div>始终全屏？
5. 尝试 <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, user-scalable=no">
6. 使用网格代替androbin sugested(可能是最好的)