我正在现场工作,并在其上实施响应式设计,对此我是陌生的,并且正在使用
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,max width:480px等相同...
问题是.hero主要部分没有响应。width of 757px始终显示.hero width is 750px,而320 , 480 ,640 ,720 px和其他宽度(例如(800,960,1024,1280,1366 px))上的浏览器窗口显示出很好的响应速度之后结果和.hero宽度变化。
我停留在这个主要部分上,请为此找出一些解决方案,

最佳答案

您的媒体查询需要另外一个方括号,例如:

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

关于html - 响应式媒体查询在CSS中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18448476/

10-12 12:47
查看更多