Chrome与媒体查询有关的错误

问题描述

我在chrome浏览器中遇到了一个奇怪的问题

I have a wierd problem with media queries in chrome

我向页面中的某些元素添加了过渡，并创建了3种状态的媒体查询

I added transition to some elements in my page and created for example 3 states of media queries

当我调整浏览器的大小并更改媒体查询的状态时，我的元素使用动画来更改大小，这是不错的选择，但是当我尝试将浏览器的大小恰好保持在媒体查询的边缘或与之非常接近时，元素怪异和晃动，有时在放开调整大小时像放慢速度一样会降低我的页面速度，主要问题是当我以该大小刷新时，页面会出现该错误

when I resize the browser and change the state of media query my elements change size with animation, it's okey and perfect but when I try to keep the size of the browser exactly in the edge of media queries or very close to it my elements quirks and shake, sometimes slow down my page speed like slow motion when I drop the resize, the main problem is when I refresh in that size the page run with that bug

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

I checked my media queries area

它是:

@media all和(最小宽度:1500px)

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

@media all和(最小宽度:1300px)和(最大-:1499px)

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

和...

我还为媒体查询未涵盖的领域编写了一些CSS代码，因此我的代码似乎是正确的，这与chrome或有关过渡和媒体查询的技巧有关

also I written some css code for those area that media queries didnt cover so my code seems to be correct, it something about chrome or a trick about transition and media queries

例如，当我退出1500px并输入1499时，但是，当我尝试将浏览器的大小缩小到1500，并将连续更改为1499和1500时，我的元素感到困惑，那么删除转换后就没有问题

for example when I exit 1500px and enter to 1499 it's okeybut when I try to close the size of the browser to 1500 and consecutive change to 1499 and 1500 my elements confuse, there is no problem when I remove the transtion

我了解这种行为的可能性很低，但我想修复它.

I UNDERSTAND the possibility of that behavior is very low but i want to fix it.

推荐答案

您在 @media中拼写了第二个单词 width ，并且全部拼错了(min-width:1300px)和(max-with:1499px)

You misspelled the second word width in @media all and (min-width : 1300px) and (max-with: 1499px)

这篇关于Chrome与媒体查询有关的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！