媒体查询宽度问题

Question

也许这是一个新手问题，但我对媒体查询有点困惑。

我有一个 1920x1080 的 nexus 5，我正在尝试根据宽度更改 body 的背景。

这是代码

body {
    background: black;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
body {
    background: red;
}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
body{
    background: yellow;
}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body{
        background: green;
    }
}

在我的nexus 5上打开这个项目背景是红色而不是黄色，为什么？我缺少什么？我已经上传到这里 http://untruste.altervista.org/Try.html

Answer 1

请使用类似

的媒体查询添加最大宽度

/*Small devices (tablets, 768px and up)*/  

@media (min-width: 768px)and
(max-width:991px) {
body {
background: red;
}
}

/*Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width:1191px) {
body{
background: yellow;
}
}

/*Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body{
    background: green;
}
}

Answer 2

因为 1920x1080 像素不是您设备的实际分辨率而是渲染分辨率，移动设备的实际分辨率约为 360x480，这就是为什么在添加带有视口的元数据后屏幕变黑的原因。您的浏览器显示您的页面的分辨率可能在 768 到 992 像素之间。有很多事情可以说，这里有一篇关于它的文章：

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

所以你可以定位移动设备默认提供的分辨率（这不是我最喜欢的选项）或者你可以添加带有视口的元标记（因此强制他们显示页面以真实分辨率显示并且不渲染像素）并针对设备的真实分辨率，因此根据您当前的查询，手机将具有黑色背景，红色或更大的平板电脑在横向模式下将具有黄色，而大多数台式机将具有绿色背景

媒体查询宽度问题

Media queries width issue

css

media-queries