必须加<meta name="viewport">，否则媒体查询基本失效；它不是可选配置，而是浏览器渲染响应式的前提，缺失时移动端按980px缩放，导致@media (max-width: 768px)等断点永不触发。
必须加 <meta name="viewport">，否则媒体查询基本失效
很多开发者写了完整的 @media 规则，但手机上样式就是不生效——八成是漏了这行。它不是可选配置，而是浏览器渲染响应式的前提：没有它，移动端会按桌面宽度（通常是 980px）缩放整个页面，@media (max-width: 768px) 根本不会触发。
正确写法只有一行，必须放在 <head> 内：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width告诉浏览器“别猜了，就用设备真实宽度” -
initial-scale=1.0防止页面加载时自动缩放，避免文字过小 - 别加
user-scalable=no或maximum-scale—— 屏幕阅读器和部分残障用户依赖缩放功能
用 flex 或 grid 替掉 float 和固定 width
响应式布局崩坏的常见原因是用了 width: 960px、float: left 这类“刚性”写法。它们在小屏上直接溢出或堆叠错乱，且无法通过媒体查询优雅修复。
改用现代布局方式能从根本上解耦尺寸与结构：
立即学习“前端免费学习笔记（深入）”；
-
display: flex适合导航栏、卡片列表等一维排列，用flex-wrap: wrap让子项自动换行 -
display: grid适合首页/仪表盘这类二维结构，比如grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))可让列数随容器自适应 - 所有宽度优先用
%、fr、minmax()，禁用px固定宽（图标、边框等装饰性元素除外）
@media 断点别硬编码 768px / 1024px
所谓“平板断点 768px”只是历史遗留习惯，实际设备五花八门：折叠屏展开后可能是 1200px，iPhone 14 Pro Max 横屏有 932px，安卓中高端机普遍在 412–480px 宽度起步。硬写死数值会导致大量设备落在断点缝隙里。
更可靠的做法：
- 采用“移动优先”写法：基础样式默认适配小屏，再用
@media (min-width: 768px)逐步增强 - 按内容而非设备决定断点：比如当导航栏文字开始换行，或卡片并排太挤时，才是该加断点的信号
- 必要时用
matchMedia()在 JS 中监听，比如设备旋转时主动重置折叠菜单状态，避免:checked状态残留
图片和字体不响应，整个布局就白搭
就算布局再灵活，一张 width: 800px 的 banner 图或一个 font-size: 16px 的标题，都会让页面在小屏上横向滚动或文字糊成一团。
关键控制点：
- 图片统一加
img { max-width: 100%; height: auto; }，防止撑破容器 - 用
srcset+sizes让浏览器按视口宽度选图，比如<img src="small.jpg" srcset="large.jpg 1200w, medium.jpg 800w" sizes="(min-width: 800px) 800px, 100vw"> - 字体大小用
rem或clamp()，例如font-size: clamp(1rem, 4vw, 1.5rem)，兼顾最小可读性和大屏表现力
最常被忽略的是：CSS 动画或过渡效果如果只作用于 display，会导致布局突变；应改用 opacity、transform 或 max-height 配合 overflow: hidden 来保持流式行为。
