更改浏览器窗口的分辨率大小时，CSS媒体查询不起作用答案

【问题标题】：CSS Media Queries not Working when changing resolution size of browser window更改浏览器窗口的分辨率大小时，CSS媒体查询不起作用
【发布时间】：2013-04-05 00:01:08
【问题描述】：

我似乎无法让这两个查询一起工作。似乎我在“最大宽度：1360”中列出的显示内容覆盖了我必须为 990 像素显示的内容。 990px 的媒体查询不会覆盖 1360px 查询中定义的任何内容。我为页脚做了一个工作，但我认为这不是系统的设计方式。我做了一些研究，但找不到任何人能够解释为什么这不起作用：

@media screen and (max-width: 990px)    {
#header {width: 990px; display: inherit;}
#header_info {width: 990px;}
#border_header {width:990px;}
#contact_data { display: none;}
#contact_data1 {width: 990px; display: inherit;}
#contact_data1 img {float: left; }
#contact_info {width: 990px;}
#wrapper {width: 990px; float: left; }
#container {width: 990px; float: left; }
#left_window {width: 200px; float: left;  }
#left_window a {font-size:20px;}
#content {width: 687px; }
#right_window {display:none}



#footer {display:none;}
#footer_content {display:none;}
#footer_container {display:none;}
#footer_content_left {display:none;}
#footer_content_center {display:none;}
#footer_content_right {display:none;}



#footer1 {width: 990px; display:inherit;}
#footer_content1 {width: 990px; display:inherit;}
#footer_container1 {width: 990px; display:inherit;}
#footer_content_left1 {width: 150px; display:inherit;}
#footer_content_center1 {width: 150px; display:inherit;}
#footer_content_right1 {width: 150px; display:inherit;}


#product_listing {margin-left: 55px; }

#breakgarage {display: inherit;}



}





@media screen and (max-width: 1360px)    {    
#footer {width: 1360px;}
#footer_content {width: 1360px;}
#footer_container {width: 1360px;}
#footer_content_left {width:330px;}
#footer_content_center {width: 330px;}
#footer_content_right {width: 330px;}

#header {width: 100%;}
#header_info {width: 1360px;}
#border_header {width:1360px;}
#contact_data {width: 1360px;}
#contact_data img {float: left;}
.contact_data_space {padding-left: 75px;}
#contact_info {width: 1360px;}
#wrapper {width: 1360px;}
#container {width: 1360px;}

contact_info img {width: 50%}

}

【问题讨论】：

标签： css responsive-design media-queries

【解决方案1】：

CSS 是级联的。它从上到下解释。这就是为什么您的 1360px 样式会覆盖 990px 样式的原因。 990px 是 1360px 的子匹配，但它具有相同的优先级，因此它首先会下降到最后一个覆盖。

撤销您的订单。如果您使用max-width，则从上到下从最大的开始到最小的结尾。

【讨论】：

【解决方案2】：

我认为您应该将第二个媒体查询更改为：

@media screen and (min-width: 991px) and (max-width: 1360px)

这种方式只会在屏幕尺寸在 991px 和 1360px 之间时应用。

在您的代码中，第二个媒体查询将始终应用于 990 像素以下的屏幕，因为小于 990 像素的屏幕也小于 1360 像素，如果您明白我的意思...

【讨论】：

这也有效，但请注意，如果您想为两者应用“更大”的规则（对于 1360px），您最终会在代码中复制样式。跨度>
我很欣赏你们俩的补充见解。响应式网页设计对我来说仍然很新。我来自 PHP 编程，具有中级 Javascript 知识。无论如何，谢谢你们。