考虑屏幕分辨率为 1440 x 2960 像素的智能手机。现在，如果我执行像 @media(max-width: 500px) 这样的 CSS 移动查询，那么即使它是移动设备，也无法满足媒体查询。
但确实如此。考虑这个网站Loruki，它具有相同的最大宽度为 500px 的媒体查询，但当从 1440 x 2960 设备打开时，它的工作方式就像基于移动设备的网页。
像素和媒体查询如何工作？
你很screen resolution困惑screen width
即手机的屏幕宽度通常约为 200 到 500 CSS 像素。
这篇著名的博客文章解释了为什么需要引入这一点：像素不是像素
Medium 还有一篇关于该主题的优秀解释文章。
对于高分辨率屏幕，所谓的设备像素比大于1。要计算CSS像素宽度，公式如下：
CSSPixelWidth = DevicePixelWidth / DevicePixelRatio
| 归档时间： |
|
| 查看次数： |
1994 次 |
| 最近记录： |