html - 响应式媒体查询在 css 中不起作用

Question

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

当我调整浏览器 (chrome) 的大小时一切正常，例如页眉、中间、页 footer 分调整大小在 757px 之后，浏览器窗口除了站点的主要中间部分不能正常工作，主要部分的 css 样式是“.hero”和主要样式的样式:

.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;}
最大 width:1200px , max width:480px 等 ...

问题是 .hero 主要部分没有响应 在 width of 757px 总是显示 .hero width is 750px 而浏览器窗口在 320 , 480 ,640 , 720 px 以及之后的其他宽度，如 (800 ,960,1024,1280,1366 px) 给出了良好的响应结果和 .hero 宽度变化。
我停留在这个主要部分，请为此找出一些解决方案 ,,, 在此先感谢

Answer 1

您的媒体查询需要另一个括号，如下所示:

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