（CSS）媒体查询

2015年11月11日（CSS）媒体查询

嘿大家，

我想提出一个网站，我有一个CSS媒体查询的一个问题。首先让我告诉你我的代码：

@media screen and (max-width: 1100px) { 
 
    #services { 
 
     width: 90%; 
 
    } 
 
    
 
} 
 

 
#services { 
 
    text-align: center; 
 
    width: 1100px; 
 
    height: 600px; 
 
    background-color: white; 
 
    margin-left: 50%; 
 
    transform: translate(-50%); 
 
    -webkit-transform: translate(-50%); 
 
    -ms-transform: translate(-50%); 
 
    margin-top: 100px; 
 
    border-radius: 20px; 
 
    overflow: hidden; 
 
    -webkit-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
    -moz-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
    box-shadow:   0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
}

<div id='services'></div>

所以这是我的代码（不是很难右），但你可以看到我要换去服务容器时的宽度浏览器窗口小于1100.但它不会改变宽度！我之前有过这个问题，我修好了，但现在我真的不能。

有人可以帮我吗？在此先感谢！

啤酒YOLO

来源

2015-11-11 FlyingUnderpants

您的媒体查询需要低于标准CSS规则来定义，使其能够覆盖它们。就像现在一样，#services的标准规则覆盖了媒体查询规则。

来源

2015-11-11 20:54:35 emackey

雅刚打我吧:) –

谢谢你现在的作品，也感谢您的快速反应！ – FlyingUnderpants

如果这是你需要的媒体查询，你可以将它和更新 #service规则是这样的：

width: 90%; 
max-width: 1100px;

示例代码段

#services { 
 
    text-align: center; 
 
    width: 90%; 
 
    max-width: 1100px; 
 
    height: 600px; 
 
    background-color: white; 
 
    margin-left: 50%; 
 
    transform: translate(-50%); 
 
    -webkit-transform: translate(-50%); 
 
    -ms-transform: translate(-50%); 
 
    margin-top: 100px; 
 
    border-radius: 20px; 
 
    overflow: hidden; 
 
    -webkit-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
    -moz-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
    box-shadow:   0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
}

<div id='services'></div>

来源

2015-11-11 21:20:27 LGSon

（CSS）媒体查询

回答

相关问题