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

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

}

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

我刚从示例中找到760px，是否有更好的方法来决定何时从全尺寸网页切换到小屏幕的紧凑型？

Answer 1

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

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

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

Answer 2

而不是这个

/**
 * accepts an optional value of type `FooInterface` or any subtype
 */
someMethod(Optional<? extends FooInterface> arg);    

使用此

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

解决760宽度以下的所有视口。

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

它曾经是视网膜和类似显示器之前屏幕上的像素数，它具有多个设备像素（AKA设备像素比，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以获取宽度和高度，则可能无法正常工作：