HTML移动端媒体查询布局的适配方法-html教程-PHP中文网

断点应依据内容自然断裂点设定而非设备尺寸，推荐用@media (max-width: 600px)覆盖小屏、@media (min-width: 601px) and (max-width: 1024px)处理中屏、超1024px按桌面处理，所有值须带单位，screen媒体类型无需显式声明。

html移动端媒体查询布局的适配方法

media query断点怎么设才不翻车

别硬套“iPhone 6是375px”这种过时经验。真实设备像素比、缩放行为、浏览器UI占用都会让实际可用宽度浮动。最稳妥的做法是按内容撑开需求定断点，而不是按设备型号。

常见错误现象：max-width: 768px 在某些安卓平板上失效，因为系统状态栏或虚拟导航键占用了高度，导致视口宽度被压缩到750px左右就触发了平板样式，但内容其实还没挤变形。

优先用 @media (max-width: 600px) 覆盖小屏手机（文字开始换行、按钮太窄）
用 @media (min-width: 601px) and (max-width: 1024px) 处理中屏（iPad竖屏、大屏手机横屏），避免和小屏重叠
超过 1024px 就当桌面处理，除非你明确要支持折叠屏展开态
所有断点值必须加单位，768 是错的，768px 才合法

screen媒体类型要不要写

不用写。@media screen and (max-width: 600px) 和 @media (max-width: 600px) 效果完全一样，因为 screen 是默认媒体类型。加了反而冗余，还容易拼错成 sreen 导致整条规则失效。

真正需要指定媒体类型的是打印场景（@media print）或语音合成（@media speech），移动端几乎用不到。

注意：all 类型虽合法，但没必要显式声明——它就是兜底行为，写了等于没写。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

rem + 媒体查询混用时的坑

很多人以为设了 html { font-size: 10vw; } 就一劳永逸，结果在 iPad 上字体爆炸大。问题出在 vw 是相对于视口宽度计算的，而 iPad 横屏时视口宽度可能达 1366px，10vw 就变成 136.6px，根字号直接干到 136px，所有 1rem 元素都失控。

单独用 vw 做 rem 基准只适合纯手机端，且需加 max-width 限制： html { font-size: min(10vw, 20px); }
更稳的方案是媒体查询内分段控制：@media (max-width: 600px) { html { font-size: 16px; } }，再配合 @media (min-width: 601px) { html { font-size: 18px; } }
千万别在同一个选择器里混用 vw 和媒体查询做字号，浏览器解析顺序会导致不可预测的覆盖

flex布局和媒体查询怎么配才顺手

Flex 本身不是响应式银弹，它只是让元素能自动伸缩。真正起作用的是你在什么断点下改 flex-direction 或 flex-wrap。

典型错误：只写 .container { display: flex; }，却不加任何断点控制，结果在小屏上子项强行并排溢出屏幕。

小屏默认竖排：@media (max-width: 600px) { .container { flex-direction: column; } }
中屏开始横排+折行：@media (min-width: 601px) { .container { flex-direction: row; flex-wrap: wrap; } }
子项最小宽度别硬写 300px，改用 flex-basis: 100% 或 min-width: 280px（留出边距余量）
gap 属性在旧版 Safari 中不支持，需用 margin 回退，但回退代码不能塞进同一媒体查询里，否则会覆盖