元素的位置在media-query: 380px中很好，但当从更大的宽度调整到380px时就不一样了

Question

所以我有两个媒体查询:MQ1. @media screen and (max-width: 380px)和MQ2. @media screen and (max-width: 768px)。

1. 当我运行我的浏览器在一个开始宽度等于MQ**1**。一切看起来都很好。然后触发MQ2 (通过调整浏览器的大小)。然后MQ2。看起来奇怪。

2. 当我运行我的浏览器在一个开始宽度等于MQ**2**。一切看起来都很好。然后触发MQ1 (通过调整浏览器的大小)。然后MQ1。看起来奇怪。

我在chrome、IE和Iphone上都遇到了这种行为。由于某些原因，它在Firefox中不存在。

我的想法是，这可能是一个问题有关:

• float在媒体查询中被定义为:none/在切换此
时出现一些问题
• CSS3动画位置:绝对-顶部:不被重新定义的值触发新媒体查询。

可能看起来像webkit问题，但不确定。有什么想法可以导致这个问题吗?

我在这里对所有HTML/CSS做了一个简单的测试:http://codepen.io/anon/pen/HDvap

你可以尝试调整上面提到的第1 + 2点的大小，你会看到元素的位置不同的例子。

TEST说明1:当调整大小为380px;请注意，黑色按钮将错误地定位/重叠在"text1"+"text2"的图形上，整个内容容器将看起来更靠近顶部。

TEST说明2:当重新加载在380px;黑色按钮会显示得很好

编辑注1:我试着删除所有相关的动画在CSS和媒体查询工作完美。这可能是webkit特有的问题，

Answer 1

这是因为@media screen and (max-width: 768px)将覆盖@media screen and (max-width: 380px)，因为您的第二个MQ中的条件覆盖了您的第一个MQ的条件…为了避免这种冲突，不要只对min使用min和max作为MQ

@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
    */
  }

对于同样的问题，我今天已经添加了一个答案，你可以检查这里的解释:媒体查询css文件不检测