我正在尝试使一个简单的媒体查询正常工作,但它似乎在浏览器(它们中的任何一个)或移动设备中均不起作用。它在head
标签中,但并不重要。我将更改为max-width
大量进行测试。另外,我尝试使用viewport
meta标签,也可以不使用meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin:0; padding:0; background:#004716; }
p { display: inline-table; margin: 5px 5px 10px 7px; padding: 5px 5px 5px 7px; width: 30%; text-align: left; vertical-align: text-top; }
p.filled { color: #ffffff; background: #709231; }
p.left { margin: 0 0 0 0; padding: 0 0 5px 0; width: 100%; text-align: left; }
@media screen (max-width:760px) { p.filled { color: #000000; background: #ff9900; } }
</style>
您在规则中缺少“和”
@media screen and (max-width:760px) {
p.filled { color: #000000; background: #ff9900; }
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句