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

Question

对@media 查询做了一个简单的测试，看看有什么用: http://www.casedasole.it/km2014/test.html

在 test.css 中有一个 @media 查询，如果我理解媒体查询的话，它应该将横向平板电脑 (1024x768) 上的背景颜色从黑色更改为红色。 css 验证，xhtml 验证，但使用 Chris Pederick 的 Web Developer Extension -> View Responsive Layouts 和 transmog.net iPad 模拟器(我没有 iPad)，背景在 FF 中保持黑色。

如果有人能解释为什么它不起作用，我相信我会从媒体查询中获得乐趣。

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