Css 如何测量媒体查询的屏幕大小？

我正在建立一个快速响应的网站。智能手机有一套单独的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*/
 }

}

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

---

我刚刚从一个例子中发现了

760px

，有没有更好的方法来决定何时从全尺寸网页切换到小型屏幕的紧凑型

使用此选项更改媒体查询

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

如果要根据屏幕大小更改设计，请在媒体查询中仅应用屏幕

询问更多的问题

---

谢谢。

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

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

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

而不是这个

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

用这个

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

处理760宽度以下的所有视口

---

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

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

---

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

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

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

---

那么，我如何找出给定屏幕中有多少CSS像素呢？

screen.width

/

screen.height

将在JS中提供这些信息。您还可以检查变体（包括或不包括滚动条、菜单等）

devicePixelRatio

将提供CSS屏幕大小与实际屏幕大小之间的比率。通常在1和3之间变化，请注意，它并不总是整数，通常可以找到像1.33或1.5这样的值；我想问的是，既然屏幕上的像素数似乎不是物理像素数，那么px是什么意思？请注意我的答案中添加的内容