媒体查询不适用于浏览器或移动设备

Question

我试图让一个简单的媒体查询工作，它似乎无论在浏览器（其中任何一个）或移动设备。它在head标签中，但并不认为这很重要。我将max-width更改为高数量进行测试。另外，我试着用和不用viewport 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> 

Answer 1

你缺少“和”您的规则

@media screen and (max-width:760px) { 
    p.filled { color: #000000; background: #ff9900; } 
} 

Answer 2

您需要使用操作人员分开两种介质的规则。

and运营商或,（逗号）或运营商。 and将检查两个条件，并且,检查其中一个条件是否为真。

@media screen and (max-width:760px) { 
    p.filled { 
    color: #000000; 
    background: #ff9900; 
    } 
}