手机端适配核心是小屏幕下针对性调整布局，用max-width媒体查询（如768px）、viewport元标签、容器/文字自适应、display显隐切换等渐进优化。
用媒体查询做手机端适配，核心是“在小屏幕下改变布局”，不是重写整套样式，而是针对性调整容器宽度、字体大小、隐藏/显示元素、切换为竖排等。关键在于抓住几个最常改的点，一步步来。
用 max-width 定义手机断点
主流做法是用 max-width 判断设备最大宽度，比如：
- 常见断点：768px（平板窄屏）、480px 或 375px（手机主流宽度）
- 推荐写法：@media screen and (max-width: 768px) { ... }
- 别用 device-width，它受缩放和横竖屏影响，不稳定
让页面能缩放、不横向滚动
光写 CSS 不够，HTML 的 viewport 元标签必须加：
- 缺了这句，手机浏览器会按桌面宽度渲染，内容被压缩，还可能出现横向滚动条
- 不要加
user-scalable=no，影响可访问性
优先改容器和文字，别一上来就调 flex
初级项目常见结构是 header + main + footer，先确保它们在手机上不溢出：
立即学习“前端免费学习笔记（深入）”；
- 把固定宽的
width: 1200px改成width: 100%或max-width: 100% - 给图片加
max-width: 100%; height: auto;，防止撑破容器 - 标题字号从 32px 降到 24px，正文字号从 16px 调到 15–16px（太小难读，太大占屏）
用 display 切换显隐，比重排更简单
手机屏窄，有些内容可以暂时隐藏或挪位置：
- 侧边栏在手机上设为
display: none; - 导航菜单收起，用
display: flex; flex-direction: column;垂直堆叠 - 图标按钮替代文字链接，省空间（但要有 aria-label 说明功能）
