断点应依据布局坍塌临界点设定，而非手机型号；优先使用min-width，集中管理媒体查询，通过拖动调试器观察文字换行、元素重叠等现象确定真实断点值。
别按手机型号设断点，盯住你的布局在哪塌陷——比如文字突然换行、按钮重叠、图片被裁，那个像素值才是你该写的 @media 点。
断点该写多少？看容器宽度，不是看iPhone几
设计稿里卡片最大宽度是375px？那就用 @media (min-width: 376px) 开始增强；导航栏在414px下开始挤在一起？断点就设415px。网上流传的320px、480px、768px只是历史常见坍塌点，不是标准答案。
- 小屏修正（如字体微调、padding缩小）可统一用320px，但别在这儿写整套布局
- iPhone SE（375px）和部分安卓小屏（360px）差异极小，按最小可读宽度处理即可
- 别用
vw或em写断点：旧版 Safari 不支持vw在媒体查询中；em会随用户字号缩放漂移
用 min-width 还是 max-width？优先选前者
min-width 更稳定，也符合“移动优先”逻辑：先写默认小屏样式，再逐步加宽适配。混用 min-width 和 max-width 容易导致层叠混乱——比如 @media (max-width: 768px) 和 @media (min-width: 768px) 在768px这一刻可能同时生效或都不生效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 所有响应式规则建议集中写在 CSS 文件末尾
- 媒体查询块必须放在它所修改的选择器定义之后，否则会被后面未包裹的同名样式覆盖
- 每个组件都重复写一遍
@media (min-width: 768px)？后期改断点要搜遍全项目；统一收口到全局响应式区块里
真正在意的不是断点数量，而是坍塌临界点
打开浏览器开发者工具，拖动响应式调试器宽度条，眼睛盯着内容：哪里文字折行了、哪里按钮叠一起了、哪里图片被拉变形了——那才是你该记下的数值。iPad Pro 横屏超1024px，如果你只写了 @media (max-width: 1024px)，它就掉进“无样式”真空带；改成 @media (min-width: 1025px)，并基于真实布局转折来定。
真正难的从来不是写几个 @media，而是判断你的布局在哪个像素值开始“撑不住”。这个判断没法靠查表，只能靠你拖着宽度条一帧一帧看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
