Question

我的手机的分辨率为2280x1080。为什么以下代码将手机上的背景颜色更改为蓝色？

@media (max-width: 500px) { body { background-color: blue; } }

有趣的是，它在打开“计算机模式”后停止工作。确认用于chrome和firefox预览。

Answer 1

嗯，从我的角度来看，这个主题范围很广，但是我可以给您一个整体的答案。

首先，我强烈认为您想说1080x2280。如果您未先指定宽度，则会产生误导。

手机的分辨率表示为物理像素数。 CSS使用的值实际上是所谓的逻辑像素。逻辑像素基本上代表物理像素，再除以设备DPR（设备像素比率）。

因此，如果您拥有Samsung Galaxy S10之类的设备，其DPR为4，则浏览器的Viewport的尺寸为360x760。

有关该主题的精彩视频：Pixel Density, Demystified

物理像素与逻辑像素：https://blog.specctr.com/pixels-physical-vs-logical-c84710199d62

Answer 2

如果您的手机宽1080像素，则class App(tk.Tk): def __init__(self): super().__init__() self.geometry('200x200') self.db = DB() subcategory = SubCategory(self, db=self.db) category = Category(self, subcategory=subcategory, db=self.db) category.pack() subcategory.pack() category.event_generate('<Button-1>') if __name__ == "__main__": App().mainloop()-屏幕上的物理像素。例如，如果该电话的device-width是device-pixel-ratio，则表示每个“ css像素”等于3x3设备像素。媒体查询中的3是指“ css像素”，因此，设备像素比为3时，将是1500个设备像素。并且您的手机的屏幕尺寸为760x360（css）像素。

高设备像素比率（视网膜显示器和类似显示器）的最大优势在于，矢量图形，字体和高分辨率图像将以更高的细节/更好的分辨率显示。但是CSS规则中的像素单位仍指“ css像素”，这就是为什么您的背景为蓝色/应用了媒体查询的原因。

您可以在媒体查询中也使用max-width: 500px / min-device-width。但是，对于大多数用途而言，最好使用max-device-width / max-width并考虑使用“ css像素”

P.S .：您正在谈论的“计算机模式”很可能会停用或更改min-width元标记中的设置。

Answer 3

您还必须在单词media后面输入$ git -C foo/bar lfs pull来检查屏幕，媒体查询不仅可以检查屏幕，还可以检查更多内容 W3C来源：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

因此，您的情况将是：

screen

为什么媒体可以在手机屏幕上播放？

3 个答案: