我正在现场工作,并在其上实施响应式设计,对此我是陌生的,并且正在使用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/