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

Question

我正在现场工作，并在其上实施响应式设计，我对此并不陌生，并且 http://resizemybrowser.com/用于测试我的网站，

当我调整浏览器（chrome）的大小时，一切正常，如页眉、中间、页脚部分调整大小浏览器窗口，除了站点的主要中间部分在 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;}
与 Max width:1200px、maxwidth:480px等相同。 .

问题是 .hero 主要部分没有响应 Afterwidth 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;
    }
}