【发布时间】：2021-05-02 18:32:54
【问题描述】：
我已经研究了一段时间了，但仍有一些我无法理解。
许多网站（1、2）建议我们在为智能手机开发时使用一些常见的断点来进行媒体查询。
尽管debate between pixels, ems or rems（我通常使用ems），但问题是现在智能手机的分辨率越来越高，高达1080p甚至1440p。
在我看来，这使得使用媒体查询区分不同类型的设备毫无意义，因为现代智能手机与许多旧桌面具有相同的像素宽度。
使用@media (max-width: 600px)（或37.5）编写媒体查询不再有意义，因为（我使用智能手机对其进行了测试）它不会被触发。
我不能只增加断点级别，因为一些较旧的台式机或平板电脑的分辨率低于现代智能手机。此外，我会有一个从 0 到 1080px 的巨大断点（这仍然不够）。
我知道@media (hover: ...)，但我没有看到有人建议将它用于断点，而且我在任何地方都找不到它来窥视一些大型网站的 CSS
我错过了什么吗？
现代网站如何区分智能手机和台式机？
如果我在问一些愚蠢的问题，请不要攻击我...我知道我可能会错过一些简单的东西，但我不能只是得到它。任何答案将不胜感激。
提前致谢。
【问题讨论】：
-
您对智能手机分辨率的看法是错误的。硬件像素和css像素是有区别的。没有纵向模式下的智能手机宽度超过 480 像素。 CSS 无法解决智能手机的所有硬件像素。每个 css 像素转换为 2-8 个硬件像素。
-
@tacoshy 非常感谢！但是 2-8 依赖于什么？是随机的还是有任何公式可以通过实际像素数和dpi计算CSS像素数？
-
因制造商而异，也因设备而异。这是一个较旧的列表，显示了正确的 css 像素数量：mediag.com/blog/popular-screen-resolutions-designing-for-all
-
@tacoshy 非常感谢你
标签： html css responsive-design media-queries width