因此，我有两个媒体查询：MQ1. @media screen and (max-width: 380px)和MQ2. @media screen and (max-width: 768px)。
当我以等于MQ ** 1 **的开始宽度运行浏览器时。一切看起来都很好。然后，如果我触发MQ2（通过更大范围地调整浏览器的大小）。然后是MQ2。看起来很奇怪。
当我以等于MQ ** 2 **的开始宽度运行浏览器时。一切看起来都很好。如果然后我触发MQ1（通过将浏览器的大小调整得较小）。然后是MQ1。看起来很奇怪。
我正在Crome，IE和Iphone上遇到这种行为。由于某些原因，它不能在Firefox中保留。
我认为这可能是与以下问题有关的问题：
在媒体查询中将浮点数定义为：none /与此相关的一些问题
CSS3动画位置：绝对-顶部：值未重新定义
触发新媒体查询时。
似乎是一个Webkit问题，但不确定。有什么想法可能导致此问题？
我在这里整理了所有HTML / CSS的简化测试：
http://codepen.io/anon/pen/HDvap
您可以尝试按上面第1 + 2点所述调整大小，并且各个示例之间的位置也会有所不同。
测试注1：缩小到380px时； （从宽宽度开始），请注意，黑色按钮将错误地在“ text1” +“ text2”的图形上定位/重叠，并且整个内容容器将显示在顶部附近。
测试注2：重载380px时；黑色按钮会很好地显示
编辑注1：我尝试在CSS中删除所有与动画相关的内容，并且媒体查询运行正常。因此-webkit-animation-fill-mode可能是特定于Webkit的问题：
最佳答案
这是因为@media screen and (max-width: 768px)将覆盖@media screen and (max-width: 380px)，因为您的第二个MQ中的条件覆盖了您的第一个MQ中的条件...为避免这种冲突，您不仅要使用min，而且要同时使用min和max智商
@media (min-width: 380px) and (max-width: 768px) {
/*
styles only in range of 380 - 768px here
*/
}
@media screen and (max-width: 768px) {
/*
styles only in range of > 768px here
*/
}
对于同一问题，我今天已经添加了答案，您可以在此处查看说明：Media query css file not detecting
关于html - 元素在媒体查询中的位置很好:380像素-但是从较大的宽度调整为380像素时不能定位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24759136/