Question

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

我有一个1920x1080的nexus 5，我试图根据宽度改变身体的背景。

这是代码

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

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

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

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

Answer 2

请使用

等媒体查询添加最大宽度

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

媒体查询宽度问题

2 个答案: