最小可用断点组合是768px、1024px和1200px三个断点，覆盖平板竖屏、平板横屏/小桌面、常规桌面，配合移动优先写法（基础样式适配手机，再用min-width逐步增强）实现高效响应式布局。
什么是 media queries 的最小可用断点组合
响应式布局不是靠堆砌一堆断点实现的，而是用最少、最合理的断点覆盖主流设备视口范围。主流做法是只设 768px（平板竖屏起）、1024px（平板横屏/小桌面）和 1200px（常规桌面）三个断点，再多反而增加维护成本和 CSS 体积。
实际项目中更推荐「移动优先」写法：基础样式默认适配手机，再用 @media (min-width: 768px) 逐步增强。这样避免在小屏设备上加载无用的大屏规则。
- 别用设备型号命名断点（如
iphone-se），用视口宽度判断更可靠 - 避免
@media (max-width: 767px)这类“上限断点”，容易因四舍五入或缩放导致边界失效 - Chrome DevTools 的 Device Toolbar 默认启用 DPR 模拟，但真实手机可能有 1.5x 或 2.5x 缩放，建议用
viewportmeta 的width=device-width, initial-scale=1锁定
如何让图片和视频不溢出容器
img 和 video 是响应式中最容易破局的元素——它们默认按原始尺寸渲染，不随父容器缩放。直接加 width: 100% 不够，必须配合 height: auto 防止比例失真。
更稳妥的做法是统一用对象拟合控制：
立即学习“前端免费学习笔记（深入）”；
img,
video {
width: 100%;
height: auto;
object-fit: contain; /* 或 cover，按需选 */
}- 别依赖
max-width: 100%单独使用，它只限制上限，不解决小屏下过小或留白问题 - 背景图用
background-size: cover时，注意父容器必须有明确高度（比如min-height: 300px），否则高度塌陷 - SVG 图标建议内联或用
viewBox+width控制，避免用px固定尺寸
flexbox 布局在不同断点下如何安全换行
用 display: flex 做导航栏或卡片列表时，flex-wrap: wrap 很关键。但仅设这个还不够——子项的 flex-basis 决定何时换行，而它受父容器宽度和自身 min-width 共同影响。
典型错误是给子项设死 width: 25%，结果在 768px 下四列挤成一排，文字重叠。正确做法是：
.grid {
display: flex;
flex-wrap: wrap;
}
.grid > * {
flex: 1 1 calc(50% - 1rem); /* 移动端两列 */
}
@media (min-width: 768px) {
.grid > * {
flex: 1 1 calc(33.333% - 1rem); /* 平板三列 */
}
}
@media (min-width: 1024px) {
.grid > * {
flex: 1 1 calc(25% - 1rem); /* 桌面四列 */
}
}- 用
calc()减去间隙（gap），比用margin更可控；现代可直接用gap属性，但 IE11 不支持 - 避免对 flex 子项设
width同时又设flex: 0 0 auto，会导致行为冲突 - 如果内容高度差异大，加
align-content: flex-start防止顶部留空
字体大小怎么随屏幕缩放才不模糊
用 px 写死字号会卡死缩放能力，用 em 又易受嵌套影响。最简方案是根元素用 rem，配合 clamp() 实现流体字号：
html {
font-size: clamp(14px, 2.5vw, 18px);
}
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }-
clamp(min, preferred, max)在 Safari 13.1+、Chrome 88+、Firefox 79+ 支持，旧版需降级为媒体查询 - 别用
vmin或vmax做主字号，横屏手机下vmax会突然放大标题，破坏阅读节奏 - 行高建议保持无单位值（如
line-height: 1.5），避免与字号缩放不同步
真正难的是组件级一致性：一个按钮内部图标、文字、边框粗细都要按相同比例缩放，否则在 375px 宽度下可能图标太小而文字糊成一团——这需要设计系统层面约定缩放系数，不能只靠 CSS 技巧补救。
