根本原因是未设置或错误设置viewport元标签，浏览器默认按980px宽度渲染并缩放，导致文字挤成一团；必须添加，缺一不可。
响应式布局为什么在小屏上文字挤成一团
根本原因是没设 viewport 元标签，或设了但值不对。浏览器默认按 980px 宽度渲染，再缩放到手机屏幕，导致字体、间距全失真。
必须加这行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">缺一不可。漏掉
initial-scale=1.0 会导致 iOS Safari 自动缩放，文字忽大忽小；只写 width=device-width 而不加 initial-scale，某些 Android WebView 仍可能 fallback 到桌面视口。
- 不要用
user-scalable=no—— 屏蔽缩放会违反 WCAG 可访问性要求，也影响视力障碍用户 -
maximum-scale和minimum-scale尽量不用，它们在现代 iOS 上已被忽略，且容易触发 Safari 的“强制刷新”提示 - 如果用了第三方 UI 库（如 Bootstrap），确认它没覆盖你自己的
viewport设置 —— 查看渲染后的 HTML 源码，避免重复声明
媒体查询断点怎么选才不翻车
别照搬「手机 480px、平板 768px、桌面 1200px」这种过时经验。真实设备分辨率差异极大，比如 iPhone 14 Pro Max 物理像素宽度达 1290px，但 CSS 像素仍是 430px；而某些安卓折叠屏展开后 CSS 宽度能到 800px+。
更靠谱的做法是「内容驱动断点」：先写好核心内容流，等某处文字换行异常、卡片堆叠错位、导航栏溢出时，再加 @media 调整。常用且兼容性稳的断点有：
-
@media (max-width: 576px)—— 适配窄屏手机竖屏（含大部分折叠屏收起态） -
@media (min-width: 577px) and (max-width: 991px)—— 中等宽度，覆盖多数平板横屏和小尺寸笔记本 -
@media (min-width: 992px)—— 大屏及以上，可放心用多列、侧边栏等复杂布局
避免嵌套过多 @media 块，CSS 文件体积和维护成本会上升；也不建议为每个设备单独写断点（如 @media (device-width: 375px)），这类查询在桌面浏览器无法测试，且部分安卓厂商自定义 UA 会导致匹配失败。
Flexbox 和 Grid 在响应式里谁更值得投入
Grid 更适合整体页面结构划分（如 header / main / sidebar / footer 的区域响应），Flexbox 更适合组件级弹性排布（如导航菜单、卡片列表、表单控件对齐）。两者不是替代关系，而是分层协作。
实际项目中常见误用：
- 用
flex-wrap: wrap强撑多列网格 —— 当列数动态变化时，flex项宽度计算不稳定，尤其在 Safari 旧版本中易出现空白间隙 - 对整个
设display: grid并依赖grid-template-areas做响应式 —— 一旦断点增多，grid-template-areas需重复声明，可读性骤降 - 忽略
minmax()和auto-fit组合 —— 比如grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))才是真正让列数随容器自适应的写法，比手动写多个@media更简洁
注意：IE11 不支持 gap 在 Flexbox 中生效，若需兼容，得用 margin 模拟；而 Grid 的 gap 在所有现代浏览器中表现一致。
隐藏元素却还在加载图片怎么办
display: none 或 visibility: hidden 不会阻止图片资源下载，这是浏览器规范行为。尤其在移动端，隐藏的 <img src="big-banner.jpg"> 仍会发起请求、消耗流量、拖慢首屏。
真正有效的方案只有两个：
- 用
srcset+sizes让浏览器自主选择合适尺寸：@@##@@
- 对「仅大屏显示」的内容，改用
background-image配合媒体查询控制，或用loading="lazy"+ JavaScript 动态插入（注意：loading="lazy"对非可视区图片有效，但对display: none元素无效）
额外提醒：不要依赖 CSS 的 content-visibility: hidden 来节省资源 —— 它目前仅在 Chrome 85+ 支持，且对图片加载无影响；真正的性能瓶颈往往藏在未被条件渲染的 <picture></picture> 或第三方广告脚本里。
响应式最难的部分从来不是写多少 @media，而是判断哪些内容该在小屏消失、哪些必须保留、哪些要重构交互形态——这没法靠工具自动推导，得反复在真机上点、滑、缩放，看用户手指停在哪、哪里误触、哪段文案根本读不完。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
