Question

对@media查询进行了简单的测试以查看哪些有效： http://www.casedasole.it/km2014/test.html

在test.css中有@media查询应该 - 如果我已经理解了媒体查询 - 在横向平板电脑上将背景颜色从黑色更改为红色（1024x768）。 css验证，xhtml验证，但使用Chris Pederick的Web Developer Extension - ＆gt;背景在FF中保持黑色。查看响应式布局，以及transmog.net iPad模拟器（我没有iPad）。

如果有人能够解释为什么它不起作用，我相信我会对媒体查询感到满意。

Answer 1

首先，这些是最佳断点

 @media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
 @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or        @ 640 wide. */ }
 @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
 @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
 @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
 @media (min-width:1281px) { /* hi-res laptops and desktops */ }

现在，在您的情况下，请使用此媒体查询

 @media (max-width:1024px)  {
html, body { 
    background-color: #f00;
    color:#000;
     }
}

Answer 2

您需要修复媒体查询，使用max-device-width无效，您可以使用max-width。

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <style type="text/css">
        html, body {
            height: 100%;
            font-size: 12px;
            text-align: left;
            margin: 0;
            padding: 5px;
            background-color: #000;
            font-family: verdana,arial,geneva,helvetica,sans-serif;
            color: #fff;
            text-align: center;
        }
        /* iPad and other tablets (landscape) */
        @media screen and (max-width: 1024px) {
            html, body {
                background-color: #f00;
                color: #000;
            }
        }
    </style>
</head>
<body>
    <h1>Why is background not red in iPad landscape 1024px??</h1>
</body>
</html>

Answer 3

如果您使用“@media only screen and（max-width：1024px）”

，它似乎也有效

@media查询看起来不错，但不起作用

3 个答案: