必须添加viewport元标签，否则移动端默认按980px渲染导致文字小、点击错位；需设width=device-width和initial-scale=1.0，并用min-width媒体查询分三档适配，配合clamp()或rem动态字号及max-width:100%图片控制。
用 viewport 元标签控制移动端缩放
不加这个，index.html 在手机上默认按 980px 宽度渲染，文字小得看不清，点击区域也错位。必须在 里写：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
注意：initial-scale=1.0 不能省——有些安卓浏览器会默认放大；width=device-width 是关键，它让页面宽度跟随设备逻辑像素（不是物理像素），否则媒体查询会失效。
用 CSS 媒体查询适配常见断点
别硬记像素值，按设备行为分：小屏（竖屏手机）、中屏（横屏手机/小平板）、大屏（桌面）。推荐三档，用 min-width 向上覆盖，避免重复覆盖：
-
@media (max-width: 480px)：仅处理超小屏（如老款 iPhone），慎用，优先用min-width -
@media (min-width: 481px) and (max-width: 768px)：横屏手机和小平板，改字体、调间距、隐藏次要按钮 -
@media (min-width: 769px)：桌面布局，用grid或flex排多列，恢复侧边栏
错误示范：@media (max-width: 768px) 包含所有小屏，但 iPad 竖屏也是 768px，结果桌面版样式被误删——所以用 min-width 更可控。
用 rem 或 clamp() 替代固定 px 字号
固定 16px 在手机上太小，在 4K 屏上又太大。两种主流解法：
- 设根字体：
html { font-size: 100%; }，再用rem写字号，配合 JS 动态改document.documentElement.style.fontSize（按屏幕宽度等比缩放） - 更轻量的方案：
font-size: clamp(14px, 4vw, 18px);——最小 14px，最大 18px，中间按视口宽 4% 缩放，CSS 原生支持，不用 JS
clamp() 在 Safari 13.4+、Chrome 88+ 支持良好；若需兼容旧版 iOS Safari，选 rem + JS 方案，但要注意 DOMContentLoaded 时机，避免 FOUC。
图片和容器要设 max-width: 100%
没加这句，图片在小屏上直接撑破容器、触发横向滚动条。不只是 <img>，所有响应式图片容器（比如 <picture></picture>、背景图的 div）都要加：
img, picture, .hero-banner { max-width: 100%; height: auto; }
注意：height: auto 必须配对使用，否则图片会被压扁；如果用了 object-fit，也要同步检查父容器是否设了固定高宽——否则在不同分辨率下裁剪位置会偏移。
真正难的是交互细节：比如 hover 效果在触摸设备上无意义，下拉菜单在小屏该转成汉堡按钮，这些没法靠 CSS 自动解决，得结合 JS 判断 matchMedia 或用户代理特征来切换逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
