css初级项目如何适配手机端_通过媒体查询调整布局

手机端适配核心是小屏幕下针对性调整布局，用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 说明功能）