这个 CSS 媒体屏幕如何定位分辨率宽度为 1080p 的手机？

Question

我看到下面推荐的 CSS 媒体查询以 phone 为目标。是的，它适用于我的 phone。但是，我的 phone 和许多其他人的分辨率宽度为 1080 像素。它是如何工作的...？

@media screen and (max-width: 1024px) { }

Answer 1

每个设备都有物理像素大小和浏览器的比例。例如 iPhoneX 具有 1125px 和比率 3。所以 CSS 宽度将为 375px.

因此对于物理分辨率为 1125px 的屏幕，您的媒体将是

@media screen and (max-width: 375px) { }

非常好 table 在这里设计了分辨率、比率和 CSS 比例：

https://www.mydevice.io/#compare-devices

虽然你可以在media中确定-webkit-device-pixel-ratio和orientation，像这样

/* iPhone X in landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* STYLES GO HERE */}

更多信息请点击此处http://stephen.io/mediaqueries/

这个 CSS 媒体屏幕如何定位分辨率宽度为 1080p 的手机？

How does this CSS media screen target phones that have resolution width 1080p?

css

screen-resolution