Kenis Blog

Appearance

这是个非常实用、而且业界已经基本收敛的问题 👍
下面我给你一套 “测试 / 前端 / 设计都通用” 的 媒体查询临界尺寸（breakpoints），并说明为什么这么用。

✅ 一、最通用的一套断点（推荐直接用） ​

这是目前 Web 项目最常见、兼容性最好 的一组：

css
/* 手机 */
@media (max-width: 767px) {}

/* 平板 */
@media (min-width: 768px) and (max-width: 1023px) {}

/* 小屏桌面 / 笔记本 */
@media (min-width: 1024px) and (max-width: 1279px) {}

/* 大屏桌面 */
@media (min-width: 1280px) {}

✅ 覆盖 95% 设备
✅ 测试 & 设计友好
✅ 不和具体设备绑定

✅ 二、精简版（移动优先，现代推荐） ​

如果你用 mobile-first：

css
/* 默认：手机 */
body {}

/* 平板及以上 */
@media (min-width: 768px) {}

/* 桌面及以上 */
@media (min-width: 1024px) {}

/* 大屏 */
@media (min-width: 1280px) {}

✅ CSS 更干净
✅ 覆盖未来设备

✅ 三、超小屏 & 超大屏（可选） ​

超小屏（老设备 / 特殊） ​

css
@media (max-width: 375px) {}

超大屏（设计稿常见） ​

css
@media (min-width: 1440px) {}
@media (min-width: 1920px) {}

✅ 四、主流框架怎么选（对照） ​

Bootstrap 5 ​

断点宽度
sm576px
md768px
lg992px
xl1200px
xxl1400px

Tailwind CSS（默认） ​

名称宽度
sm640px
md768px
lg1024px
xl1280px
2xl1536px

👉 实际项目 可以直接沿用框架这套

✅ 五、为什么是这些数字？ ​

✅ 关键设备宽度（CSS 像素） ​

设备宽度
iPhone SE375
iPhone Pro390
iPad768
iPad 横屏1024
MacBook1280 / 1440
外接显示器1920

👉 断点 围绕设备“区间”而不是具体型号

✅ 六、测试人员怎么验证断点（实战） ​

✅ 测试关键点： ​

text
320 / 375 / 414
768
1024
1280
1440
1920

✅ 七、常见误区（一定要避开） ​

❌ 为每个设备写 media query
❌ 用 device-width
❌ 只写 max-width（非 mobile-first）
❌ 和设计稿尺寸强绑定

✅ 八、一句话总结 ​

媒体查询断点不是“设备列表”，而是“布局变化点”
行业通用：768 / 1024 / 1280 是黄金三点

如果你愿意，我可以：

  • 帮你 按你项目类型定制一套断点
  • 把设计稿尺寸 → 媒体查询
  • 或给你一份 测试断点检查表

直接告诉我你是 前端 / 测试 / 设计 即可 ✅