媒体查询主流手机的断点设置（精细化控制）方案：设置嵌套断点。第一层：屏幕宽度小于600px；第二层：屏幕宽度大于320

一、方案

设置嵌套断点。第一层：屏幕宽度小于600px（建议宽度，也可以修改为其他值）；第二层：屏幕宽度大于320px、375px、414px。

主流手机屏幕宽度对应关系

断点宽度	对应设备型号	实际屏幕宽度（参考值）
320px	iPhone 5/SE (第一代)	320px (逻辑像素)
375px	iPhone 6/7/8/X/11/12 mini	375px (逻辑像素)
414px	iPhone 6/7/8 Plus, 11/12	414px (逻辑像素)
	Android 中低端机型	360px-414px 常见范围

为什么选择这些断点？

覆盖率高：根据 StatCounter 数据，上述断点覆盖了全球约 80% 的移动设备。
设计便捷：以常见机型为参考，便于设计师和开发者对齐视觉效果。
rem 单位适配：通过调整根字体大小，能有效缩放整个页面的布局和文字。

需要注意的问题

超大屏手机：如三星 Note 系列（约 480px）或折叠屏手机，可能需要额外断点：

css

@media screen and (min-width: 480px) {
  html {
    font-size: 20px;
  }
}

字体大小临界点：在 375px 和 414px 之间，部分设计可能需要微调以避免字体过大或过小。
高 DPI 屏幕：上述断点基于逻辑像素（CSS 像素），实际物理像素可能是 2 倍或 3 倍（如 iPhone X 的 1125×2436 物理像素对应 375×812 逻辑像素）。

优化建议

添加最大宽度限制：防止在平板或桌面端字体过大：

css

@media screen and (min-width: 768px) {
  html {
    font-size: 20px; /* 平板及以上设备统一字体大小 */
  }
}

结合 viewport 单位：更精确地控制字体缩放：

css

html {
  font-size: clamp(14px, 3vw, 20px); /* 最小14px，最大20px，中间随视口宽度变化 */
}

使用 Chrome DevTools 模拟：在开发者工具中测试不同设备的显示效果，确保在所有主流机型上视觉一致。

主流设备测试清单

建议在以下设备上验证设计效果：

iPhone SE (320px)
iPhone 12/13 (390px)
iPhone 12 Pro Max (428px)
Samsung Galaxy S21 (384px)
Pixel 5 (393px)
OnePlus Nord N20 (395px)

通过以上断点和优化，你的 rem 布局方案将能够良好适配 95% 以上的主流移动设备。

二、示例代码

/* 媒体查询 */
/*当屏幕宽度小于600px时*/
@media screen and (max-width: 600px) {
    html {
        font-size: 16px;
    }
    .middle_a_content_item_left {
        font-size: 0.875rem;
    }
    /*当屏幕宽度大于320px时*/
    @media screen and (min-width: 320px) {
        .middle_a_content_item_left {
            font-size: 0.875rem;
        }
    }

    /*当屏幕宽度大于375px时*/
    @media screen and (min-width: 375px) {
        .middle_a_content_item_left {
            font-size: 1rem;
        }
    }

    /*当屏幕宽度大于414px时*/
    @media screen and (min-width: 414px) {
        .middle_a_content_item_left {
            font-size: 1.125rem;
        }
    }


}

注意：首先设置html全局字体大小，再设置其他字体大小为rem。设置为rem的好处请看下一节。