(CSS)媒体查询

Question

2015年11月11日

嘿大家,

我正在建立一个网站,我遇到了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时改变de服务容器的宽度.但它不会改变宽度!我以前遇到过这个问题并且我修好了但是现在我真的不能解决了.

有人可以帮帮我吗？提前致谢!

啤酒Yolo

Answer 1

您的媒体查询需要在标准CSS规则下定义,以便它能够覆盖它们.就像现在一样,您的标准规则#services是覆盖相同的媒体查询规则.