响应式 css 加载正常 css

Question

我正在设计一个响应式网站。对于该网站，我使用的是 div “two”。 “二”css是

#two { 
overflow:hidden;
min-height: 85px;
margin-left: 22%;
}

响应式 css 就像休闲

@media screen and (max-width: 400px) {
  #two{ 
        //empty field
  }
}

当缩小浏览器窗口时，加载正常的 css 而不是“媒体屏幕和（最大宽度：400px）”

Answer 1

这是应该的，你有一个 ID 2 的定义，然后如果宽度小于 400 像素，你有第二个空定义。所以想象一下，去掉你的媒体条款，你就得到了这个。

#two { 
overflow:hidden;
min-height: 85px;
margin-left: 22%;
}
#two{ 
    //empty field
}

这就是当您的屏幕小于 400 像素时 CSS 处于活动状态的原因，您可以将您的第一个定义包装在媒体查询中以仅在屏幕大于 400 像素时应用，或者覆盖您在第一个中设置的每个属性#two 块，在媒体查询中的第二个块中。