带有媒体查询的 chrome 中的错误

Posted 2023-03-06

【中文标题】带有媒体查询的 chrome 中的错误

【英文标题】：bug in chrome with media queries

【发布时间】：2013-08-19 13:50:33

【问题描述】：

我对 chrome 中的媒体查询有一个奇怪的问题

我在页面中的某些元素中添加了 transition，并创建了例如 3 种媒体查询状态

当我调整浏览器的大小并更改媒体查询的状态时，我的元素会随着动画而改变大小，这很好而且很完美，但是当我尝试将浏览器的大小完全保持在媒体查询的边缘或非常接近时，我的元素怪异和抖动，有时当我放下调整大小时会像慢动作一样减慢我的页面速度，主要问题是当我以该大小刷新页面时会出现该错误

我检查了我的媒体查询区域

它是：

@media all and (min-width: 1500px)

@media all and (min-width : 1300px) and (max-with: 1499px)

和...

我还为媒体查询未涵盖的那些区域编写了一些 css 代码，因此我的代码似乎是正确的，它是关于 chrome 或关于过渡和媒体查询的技巧

例如，当我退出 1500px 并进入 1499 时，这没关系 但是当我尝试将浏览器的大小关闭到 1500 并连续更改为 1499 和 1500 时，我的元素会混淆，当我删除转换时没有问题

我了解这种行为的可能性非常低，但我想解决它。

【问题讨论】：

可以创建一个jsFiddle来演示吗？

【参考方案1】：

您在@media all and (min-width : 1300px) and (max-with: 1499px) 中拼错了第二个单词width