gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 12:32:47 27 4
gpt4 key购买 nike

我正在尝试创建许多彼此相邻的正方形 div(如果文本太多,它们的高度会扩展......但大多数时候不会有太多文本)。我正在尝试以响应式方式进行设置。

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

我的 HTML 代码中有以下视口(viewport)行:

<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 忽略地址栏并假装它不存在?如果没有,我还有什么其他选择可以解决这个问题?

最佳答案

从糟糕的 UX 开始,Chrome 添加了仅在隐藏地址栏后才计算 vhvmin 等值的功能。这样浏览器就不会统计太多次,fps也不会下降,但是会出现跳跃的效果。

如果我是你,我会使用网格。您可以使用 min-content 高度,并且每行中的框将独立地具有相同的高度。使用 repeatauto-fillminmax 可以添加尽可能多的框,而无需通过移动查询添加额外的 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com