媒体查询的屏幕尺寸是如何测量的? [英] How is the screen size measured for media queries?

问题描述

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

I'm building a responsive website. There's a separate set of CSS to apply for smartphones. To do this, I use the following code

@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 所以第一个块不应该适用吗?屏幕分辨率实际上不是以像素为单位测量的吗?如果不是，那么如何找到屏幕中有多少像素?

My smartphone has a "Screen Resolution: 1080 x 1920." but it still displays the CSS for small screens. I'm surprised this is happening because 1080 > 760 so shouldn't the first block apply? Is screen resolution not actually measured in pixels? If not, then how does one find how many pixels in a screen?

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

I just found 760px from an example, is there a better way to decide when to switch from full size web page to compact for small screens?

推荐答案

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

There are two different concepts: the physical pixels of the screen, and the CSS pixels.

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

Initially, they were in most cases the same, but with so-called "retina" or "hidpi" screens, they are no longer the same. The idea is that a CSS pixel should retain about the same size, and be independent from the actual number of pixels on the screen: you don’t want to have text with CSS font-size 12px to have different sizes on screens with the same dimensions because their pixel density changes.

因此，您手机的 1080 像素宽度可能映射到 360 CSS 像素(x3 像素比).

So the 1080 pixel width of your phone is probably mapped to 360 CSS pixels (x3 pixel ratio).

这篇关于媒体查询的屏幕尺寸是如何测量的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！