html - 最小化时，网站在@media 设备上使用原始 CSS 代码

Question

我正在尝试让我的网站响应媒体。

在标准模式下，这是 div 的 css 代码:

      position: relative;
      z-index: 10;
      top: 190px;
      background: rgba(0,0,0,0.5);
      padding: 22px 10px 10px 10px;
      margin: 0 auto;
      max-width: 700px;

然后当它用于小型设备时，CSS 应该是这样的:

@media only screen and (max-width: 740px){
#outside-main-search {
      position: absolute;
      margin-top: 0;
      top: 100%;         
      }
}

@media 的问题不是覆盖现有代码，所以如果我使用开发工具，它就是这样显示的:

上面是页面最小化后的结果，为什么没有覆盖上面的css代码？

Answer 1

在你的 CSS 中，是你的

@media only screen and (max-width: 740px) 

在第一个

#outside-main-search

?

因为如果没有，那么#outside-main-search 将应用于@media only 屏幕和(最大宽度:740 像素)

(CSS是级联样式表，所以最后一个应用的就是用过的)

您的 chrome 显示特定媒体在非特定之前应用。