html - 元素在媒体查询 : 380px - but not when resized from bigger width and down to 380px 中的位置很好

Question

所以我有两个媒体查询:MQ1。 @media 屏幕和(最大宽度:380 像素) 和 MQ2。 @media 屏幕和(最大宽度:768px)。

1. 当我以等于 MQ**1** 的起始宽度运行浏览器时。一切看起来都很好。如果我随后触发 MQ2 (通过调整浏览器的宽度)。然后是 MQ2。看起来很奇怪。

2. 当我以等于 MQ**2** 的起始宽度运行浏览器时。一切看起来都很好。如果我随后触发 MQ1 (通过缩小浏览器的宽度)。然后是 MQ1。看起来很奇怪。

我在 Crome、IE 和 Iphone 上遇到了这种行为。由于某种原因，它不会在 Firefox 中持续存在。

我的想法是，这可能是与以下相关的问题:

• float 在媒体查询中被定义为 :none/切换这个有一些问题
• CSS3 动画position:absolute - 顶部:未重新定义值 当触发新的媒体查询时。

似乎是 webkit 问题，但不确定。对可能导致此问题的原因有任何想法吗？

我在这里整理了所有 HTML/CSS 的简化测试: http://codepen.io/anon/pen/HDvap

您可以尝试按照上面第 1 点和第 2 点所述调整大小，您会看到元素的位置因示例而异。

测试说明 1:当缩小到 380 像素时； (从宽宽度)请注意，黑色按钮将错误地定位/重叠在“text1”+“text2”的图形上，并且整个内容容器将看起来更靠近顶部。

测试说明 2:以 380 像素重新加载时；黑色按钮会很好地显示

编辑说明 1:我尝试删除所有与 CSS 中的动画相关的内容，媒体查询工作得很好。所以可能是 -webkit-animation-fill-mode: forwards 的 webkit 特定问题；

Answer 1

这是因为 @media screen and (max-width: 768px) 将覆盖 @media screen and (max-width: 380px) 作为第二个条件MQ 涵盖您的第一个 MQ 的条件...为了避免这种冲突，而不是仅使用 min 为您的 MQ 使用 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