应使用视口宽度断点：手机@max-width:767px、平板@min-width:768px and max-width:1023px、桌面@min-width:1024px；配合flex-direction/column、flex-wrap/wrap及rem动态根字体实现响应式布局。
怎么用 @media 区分手机和平板断点
手机和平板的区分不能只看“是否是移动端”，关键在视口宽度。主流做法是用两个断点：max-width: 767px（手机），min-width: 768px 且 max-width: 1023px（平板），再加一个 min-width: 1024px（桌面）。注意：iPad 竖屏是 768px，横屏是 1024px，所以平板样式必须覆盖这两个方向。
常见错误是只写 @media (max-width: 768px)，结果 iPad 竖屏被当成手机，横屏又没匹配到任何规则，布局错乱。
- 手机断点建议用
@media (max-width: 767px)（避免和 iPad 竖屏重叠） - 平板断点用
@media (min-width: 768px) and (max-width: 1023px) - 别依赖
device-width，它受缩放、UA 欺骗影响大，优先用width或viewport宽度 - 在
中确认已设置：<meta name="viewport" content="width=device-width, initial-scale=1">
display: flex 在不同断点下怎么改方向和换行
弹性盒子本身不自动响应，必须配合媒体查询手动调整 flex-direction、flex-wrap 和子项的 flex-basis。比如导航栏在桌面是横向一行，到平板可能需要两行，手机则收成垂直菜单。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 默认设为
flex-direction: row，手机断点改成column - 用
flex-wrap: wrap允许换行，再配合flex-basis控制每项最小宽度（如平板设flex-basis: 50%实现两列） - 避免对所有子项写
flex: 1，它在小屏下会强行挤压内容，应改用flex: 0 0 auto+ 显式宽高 - 注意
align-items在column下会变成“水平对齐”，容易误以为失效
为什么用 rem 配合媒体查询比单纯用 em 更稳
em 是相对父元素字体大小，嵌套深了就难控制；rem 始终相对根元素（html），配合媒体查询动态调 html 的 font-size，就能统一缩放整个布局的比例。
- 在手机断点设
html { font-size: 14px; }，平板设16px，桌面设18px - 所有间距、圆角、内边距用
rem，比如padding: 1rem在手机就是 14px，在平板就是 16px - 别忘了重置
body的默认margin和line-height，否则rem缩放后文字行高可能溢出 - 慎用
vw做字体大小——iOS Safari 在横竖屏切换时不会实时重绘，导致字体卡在旧尺寸
实际调试时最常漏掉的三件事
写完媒体查询和 flex 样式，真机测试仍出问题，大概率是这三项没检查：
- Chrome DevTools 的设备模拟器默认开启“Throttle CPU”，会掩盖重排性能问题；切到真实手机用远程调试，才能看到 flex 换行延迟或闪烁
- 某些安卓 WebView 对
flex-wrap: wrap-reverse支持差，尽量用wrap+order替代 - 图片没设
max-width: 100%和height: auto，在小屏下直接撑破容器，flex 再怎么调也无济于事
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
