媒体查询的屏幕尺寸是如何测量的？

Question

我正在构建一个响应式网站。 有一组单独的 CSS 可用于智能手机。 为此，我使用以下代码

@media all and (min-width: 760px) {

 .wrap {
    /*css for large screens goes here*/
 }

}

@media not all and (min-width: 760px) {

 .wrap {
    /*css for small screens goes here*/
 }

}

我的智能手机具有“屏幕分辨率：1080 x 1920”。 但它仍然显示小屏幕的 CSS。 我很惊讶会发生这种情况，因为 1080 > 760 所以第一个块不应该适用吗？ 屏幕分辨率实际上不是以像素为单位测量的吗？ 如果不是，那么如何找到屏幕中有多少像素？

我刚刚从一个例子中找到了760px ，有没有更好的方法来决定什么时候从全尺寸网页切换到小屏幕的紧凑页面？

Answer 1

有两个不同的概念：屏幕的物理像素和 CSS 像素。

最初，它们在大多数情况下是相同的，但是对于所谓的“视网膜”或“hidpi”屏幕，它们不再相同。 这个想法是 CSS 像素应该保持大致相同的大小，并且独立于屏幕上的实际像素数：您不希望 CSS font-size 12px文本在具有相同大小的屏幕上具有不同的大小。尺寸，因为它们的像素密度会发生变化。

所以你手机的 1080 像素宽度可能映射到 360 CSS 像素（x3 像素比）。

Answer 2

而不是这个

@media not all and (min-width: 760px) {

用这个

@media all and (max-width: 759px) {

处理宽度低于 760 的所有视口。

---

另外，回答评论中的问题“我问的是 px 是什么意思，因为它似乎不是屏幕上的物理像素数”：

在引入视网膜和类似显示器之前，它曾经是屏幕上的像素数，它有多个设备像素（也称为设备像素比，在 1.5 到 3 倍之间）。

尽管如此，当这些出现时，一个“CSS 像素”的大小参考保持不变（即，一个 CSS 像素将是设备像素比为 2 的设备上的 2 个设备像素），否则所有网站都将显示为一半这些设备上的大小。 所以 CSS 中使用的像素单位指的是“CSS 像素”而不是“设备像素”，除非另有说明（这只能在媒体查询中使用）。

Answer 3

使用此更改您的媒体查询。

@media only screen and (min-width: 760px) {
     // for screens above 760px
    .wrap {
        color: blue;
    }
}

@media only screen and (max-width: 760px) {
     // for screens below 760px
    .wrap {
        color: lightblue;
    }
}

如果您想根据屏幕尺寸更改设计，请仅在您的媒体查询中应用屏幕。

询问更多查询。

谢谢。

Answer 4

转到浏览器的开发工具并选择 body 标签，然后，您将通过以下方式找到宽度和高度：

由于一些 CSS 问题，如果您使用以下数据创建一个简单的 HTML 来获取宽度和高度，这可能无法正常工作会很好：