手机排版乱主因是页面未适配小屏幕，需先加viewport元标签，再用@media query按max-width或min-width设断点调整宽度、浮动、字体、图片等样式，优先移动端布局，逐步增强适配。
手机上排版乱，通常是因为页面默认按桌面宽度设计，没适配小屏幕。核心解决方式是用 @media query 针对不同屏幕宽度调整样式，让布局“活”起来。
先加 viewport 元标签
这是响应式的第一步，没有它，手机会强行缩放桌面版页面，media query 也难生效：
``把它放在 HTML 的 里，确保浏览器按真实设备宽度渲染。
用 min-width 或 max-width 写断点
别硬记具体像素，从项目实际内容出发。常见做法：
立即学习“前端免费学习笔记（深入）”；
- 用
max-width: 768px覆盖手机竖屏（多数手机宽度 ≤ 768px） - 用
max-width: 480px单独处理小屏手机（如老款 iPhone） - 避免只写一个断点，可叠加：先写基础样式（移动端优先），再用
min-width逐步增强适配平板、桌面
重点调这些样式
排版乱常集中在几个地方，media query 里优先处理：
-
宽度相关：把固定
width: 1200px改成width: 100%或max-width: 100% -
浮动失效：手机上
float容易错行，改用display: block或 Flex 布局 -
字体和内边距：
font-size和padding太大时挤出屏幕，适当缩小（如font-size: 14px→16px） -
图片溢出：加
img { max-width: 100%; height: auto; }，保证不撑破容器
简单例子：导航栏收拢
桌面显示横向菜单，手机上改成汉堡按钮+垂直列表：
- 默认（移动端）隐藏菜单，只显示按钮
- 在
@media (min-width: 769px)里让菜单横向展开、按钮隐藏 - 点击按钮用 JS 切换菜单显隐，CSS 只管样式状态
响应式不是“让所有设备看起来一模一样”，而是让内容在不同尺寸下清晰、可用、不重叠——从 viewport 开始，用 media query 控制关键样式，问题就解决大半了。
