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

【问题标题】：How is the screen size measured for media queries?如何测量媒体查询的屏幕尺寸？
【发布时间】：2018-06-14 05:04:52
【问题描述】：

我正在构建一个响应式网站。有一组单独的 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，有没有更好的方法来决定何时从全尺寸网页切换到小屏幕的紧凑型网页？

【问题讨论】：

标签： css responsive-design media-queries screen-size

【解决方案1】：

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

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

因此，您手机的 1080 像素宽度可能映射到 360 CSS 像素（x3 像素比率）。

【讨论】：

那么我如何找出给定屏幕中有多少 CSS 像素？
screen.width / screen.height 将在 JS 中为您提供该信息。您还可以查看ryanve.com/lab/dimensions 的变体（包括或不包括滚动条、菜单等）。 devicePixelRatio 会给你 CSS 屏幕尺寸和实际屏幕尺寸之间的比率。通常在 1 和 3 之间变化，注意它并不总是整数，常见的值是 1.33 或 1.5。

【解决方案2】：

不是这个

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

使用这个

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

解决所有宽度低于 760 的视口。

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

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

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

【讨论】：

谢谢，但这不是我要问的；我在问px 是什么意思，因为它似乎不是屏幕上的物理像素数？
请注意我的回答中的补充

【解决方案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;
    }
}

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

询问更多问题。

谢谢。

【讨论】：

【解决方案4】：

打开浏览器的开发工具，选择body标签，然后就可以看到宽度和高度了：

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

【讨论】：