gpt4 book ai didi

css - 媒体查询+浏览器缩放

转载 作者:太空宇宙 更新时间:2023-11-04 02:15:29 25 4
gpt4 key购买 nike

当涉及到媒体查询和浏览器缩放时,我遇到了一个非常奇怪的问题。

我使用的是 Chrome 52.0.2743.116 m。

问题是这样的:

当您使用浏览器缩放到 125% 并调整浏览器大小时,直到平板电脑应该启动(最大宽度:1024 像素)时,似乎有时最大宽度:1024 像素或最小宽度都不是: 1025px 为真。

如果我将其更改为 max-width: 1024.9px - 它有效。

这是一个简单的例子:

<div class="box">
Text
</div>
<div class="box">
Text
</div>
<div class="box">
Text
</div>

还有 CSS:

@media (max-width:768px) {
.box {
background: blue;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
.box {
background: red;
}
}

@media (min-width:1025px) {
.box {
background: green;
}
}

示例:http://codepen.io/tomusborne/pen/EyrNvG

放大 125%,然后缩小直到变成红色。逐个像素地调整大小,您会发现平板电脑和桌面之间的一个像素根本没有背景颜色。

有人知道这里发生了什么吗?使用 1024.9px 是一个不错的解决方案吗?我要疯了吗?

最佳答案

检查 <html>元素包含答案:

screenshot

所以页面宽度实际上大于1024px小于1025px。

我建议对 min-width 使用完全相同的值和 max-width .
这涵盖了所有宽度,没有间隙,如果发生冲突(即页面正好 1024px 宽),则文档中稍后出现的规则应优先。

关于css - 媒体查询+浏览器缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38981132/

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