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

Question

我正在尝试让一个简单的媒体查询正常工作，但它似乎在浏览器（任何浏览器）或移动设备中都不起作用。它在 head 标签中，但认为这无关紧要。我将 max-width 更改为较高的数字以进行测试。此外，我尝试使用和不使用 viewport 元标记。

    <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

您的规则中缺少 "and"

@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;  
   } 
}

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

Media query doesn't work on browsers or mobile devices

css

media-queries