举例说下主流手机的分辨率有哪些？

主流手机分辨率多种多样，一直在不断发展变化。为了前端开发适配，我们需要关注一些常见的分辨率以及分辨率的逻辑划分方式，而不是单纯的罗列。以下是一些主流和需要关注的手机分辨率以及思考方式：

按逻辑像素密度划分（DPI/PPI 相关）：

• ldpi (low dpi): ~120dpi，现在基本已经淘汰，可以不考虑。
• mdpi (medium dpi): ~160dpi， 也是较老的设备，适配优先级低。 基准分辨率 320x480.
• hdpi (high dpi): ~240dpi， 曾经的主流，现在中低端设备还在使用。 基准分辨率 480x800.
• xhdpi (extra-high dpi): ~320dpi，目前比较常见的分辨率区间. 基准分辨率 720x1280.
• xxhdpi (extra-extra-high dpi): ~480dpi， 高分辨率，高端机型常见. 基准分辨率 1080x1920.
• xxxhdpi (extra-extra-extra-high dpi): ~640dpi， 超高分辨率，旗舰机型常见. 基准分辨率 1440x2560.
• 更高分辨率: 一些更高分辨率的设备，例如 4K 屏幕等，通常也会被归类到 xxxhdpi 或更高的自定义分类中。

一些常见的具体分辨率：

• 320 x 480: 早期 iPhone 分辨率，现在很少见。
• 480 x 800: 较老的 Android 设备。
• 720 x 1280 (720p): 曾经非常主流，现在依然常见。
• 1080 x 1920 (1080p/FHD): 非常 phổ biến 的分辨率。
• 1440 x 2560 (2K/WQHD): 高端机型常见。
• 1440 x 3040: 三星等一些厂商使用的分辨率。
• 2160 x 3840 (4K/UHD): 部分高端机型使用。

前端开发适配建议：

• 使用 viewport meta 标签： 这是移动端适配的基础，确保页面能够正确缩放。
• 使用 CSS 媒体查询： 根据不同的屏幕尺寸和分辨率，应用不同的样式。
• 使用弹性布局 (Flexbox) 和网格布局 (Grid): 方便创建自适应布局。
• 图片使用多种分辨率版本： 通过 srcset 属性，根据设备分辨率加载合适的图片，避免资源浪费和显示模糊。
• 测试不同设备： 使用浏览器开发者工具模拟不同分辨率，或者在真机上进行测试，确保页面在各种设备上都能正常显示。

不要过于纠结于具体的数字，更重要的是理解分辨率的逻辑划分方式，以及如何根据不同的屏幕密度进行适配。 关注像素密度比关注具体分辨率数值更重要，因为 Android 和 iOS 系统会根据像素密度进行缩放。

希望以上信息对您有所帮助!