响应媒体查询无法在CSS中工作

Question

我正在网站上工作，并在其上实施响应式设计，我是新手，并使用 http://resizemybrowser.com/用于测试我的网站，

当我调整浏览器窗口（页面，中间，页脚部分大小）时，一切正常工作，除了网站的主要中间部分在757px之后效果不佳，主要部分的CSS风格是＆＃34; .hero＆＃34;和主要风格的风格：
.hero {width: 930px;color: #444;margin: 0 auto;}和.hero的媒体查询是@media (max-width: 979px).hero {width: 750px;color: #444;margin: 0 auto;}
@media (max-width: 767px).hero {width: 650px;color: #444;margin: 0 auto;}
和Max width:1200px，max width:480px等相同...

问题是.hero主要部分没有响应后width of 757px总是在.hero width is 750px上显示320 , 480 ,640 ,720 px而在{{1}}上显示浏览器窗口之后显示{{1}}，在其他宽度上显示{800}，960,1024,1280， 1366 px）提供良好的响应结果＆amp; .hero宽度变化。
我被困在这个主要部分，请找出一些解决方案,,,提前谢谢

Answer 1

您的媒体查询需要另一个括号，例如：

@media (max-width: 979px) {
    .hero {
        width: 750px;
        color: #444;
        margin: 0 auto;
    }
}