标题备选
- 手把手梳理：媒体查询一般用那几个尺寸做临界
- 媒体查询一般用那几个尺寸做临界 学习笔记：核心概念和实践步骤一次讲清楚
- 从零理解 媒体查询一般用那几个尺寸做临界：把容易混淆的地方说明白
摘要
这篇文章围绕「媒体查询一般用那几个尺寸做临界」整理核心概念、实践步骤和注意事项，适合需要快速复习或动手验证的技术同学阅读。
正文
哈喽大家好👋 我是程序🦍kk。把复杂知识掰成大白话讲明白，是我一直以来的小追求✨；打好基础才能稳步进阶，是我始终秉持的学习理念～
📢 我搭建了5000人程序猿专属学习交流群 群内会同步前端开发/全栈开发/Web3开发/远程工作等干货资源 关注我并回复 加群 ，就能加入交流圈啦🚀
前言
把零散笔记整理成可复用的方法，才是真的学到手。
这类知识点如果只看一遍，很容易停留在“好像懂了”的阶段。
这篇围绕「媒体查询一般用那几个尺寸做临界」把关键概念和操作步骤重新梳理，方便后续复习和实践。
正文整理
下面进入正文整理。建议大家按自己的使用场景挑重点看，再回到实践里验证。
如果你也在整理自己的技术笔记，可以把本文当作一个结构参考：先讲问题，再讲步骤，最后补注意点。
这是个非常实用、而且业界已经基本收敛的问题 👍 下面我给你一套 “测试 / 前端 / 设计都通用” 的 媒体查询临界尺寸（breakpoints），并说明为什么这么用。
✅ 一、最通用的一套断点（推荐直接用）
这是目前 Web 项目最常见、兼容性最好 的一组：
/* 手机 */
@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：
/* 默认：手机 */
body {}
/* 平板及以上 */
@media (min-width: 768px) {}
/* 桌面及以上 */
@media (min-width: 1024px) {}
/* 大屏 */
@media (min-width: 1280px) {}✅ CSS 更干净 ✅ 覆盖未来设备
✅ 三、超小屏 & 超大屏（可选）
超小屏（老设备 / 特殊）
@media (max-width: 375px) {}超大屏（设计稿常见）
@media (min-width: 1440px) {}
@media (min-width: 1920px) {}✅ 四、主流框架怎么选（对照）
Bootstrap 5
| 断点 | 宽度 |
|---|---|
| sm | 576px |
| md | 768px |
| lg | 992px |
| xl | 1200px |
| xxl | 1400px |
Tailwind CSS（默认）
| 名称 | 宽度 |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
👉 实际项目 可以直接沿用框架这套
✅ 五、为什么是这些数字？
✅ 关键设备宽度（CSS 像素）
| 设备 | 宽度 |
|---|---|
| iPhone SE | 375 |
| iPhone Pro | 390 |
| iPad | 768 |
| iPad 横屏 | 1024 |
| MacBook | 1280 / 1440 |
| 外接显示器 | 1920 |
👉 断点 围绕设备“区间”而不是具体型号
✅ 六、测试人员怎么验证断点（实战）
✅ 测试关键点：
320 / 375 / 414
768
1024
1280
1440
1920✅ 七、常见误区（一定要避开）
❌ 为每个设备写 media query ❌ 用 device-width ❌ 只写 max-width（非 mobile-first） ❌ 和设计稿尺寸强绑定
✅ 八、一句话总结
媒体查询断点不是“设备列表”，而是“布局变化点” 行业通用：768 / 1024 / 1280 是黄金三点
如果你愿意，我可以：
- 帮你 按你项目类型定制一套断点
- 把设计稿尺寸 → 媒体查询
- 或给你一份 测试断点检查表
直接告诉我你是 前端 / 测试 / 设计 即可 ✅
写在最后
好啦，今天的分享就到这里！
💬 互动时间：
你还想看「媒体查询一般用那几个尺寸做临界」相关的哪一块展开？可以把你的使用场景或具体问题留言给我。
最后，感谢你看到这里👏
如果喜欢这篇内容，不妨顺手给小编安排一波👇 点赞👍｜转发📲｜推荐❤️｜评论📣
要是想第一时间蹲到新内容推送，记得给我点个星标⭐️
更多干货内容正在持续填坑中，咱们下期见👋
标签建议
技术笔记