用3–4个min-width断点（如768px、1024px、1200px）覆盖主流设备，按内容临界点而非机型设断点，并必须配合viewport meta标签实现移动优先响应式布局。

直接用 3–4 个基于视口宽度的 min-width 断点就能稳稳覆盖主流移动设备，关键不是凑机型数字，而是让样式随内容自然“撑开”。

按内容临界点设断点，别背 iPhone 尺寸

文字开始挤成两行、按钮排不下、图片溢出容器——这些才是真实触发点。比如导航栏从竖排变横排，不是因为“iPhone 14 是 390px”，而是当宽度足够容纳所有菜单项且不换行时，那个宽度就是你的断点。

• 优先用 @media (min-width: 768px) 切平板竖屏（如 iPad）
• @media (min-width: 1024px) 对应平板横屏或小桌面，适合加网格列
• @media (min-width: 1200px) 覆盖主流桌面，可设固定最大宽度

必须配 viewport meta 标签

没这行，媒体查询基本失效：

<meta name="viewport" content="width=device-width, initial-scale=1">

它告诉浏览器：别缩放，按设备真实视口宽度渲染。否则 CSS 里的 width 值会失真，断点全乱。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

别混用 min-width 和 max-width 在同一逻辑里

容易覆盖冲突，调试困难。统一用 移动优先写法：基础样式默认适配手机，再用 min-width 向上增强。

• 错误示范：@media (max-width: 767px) { ... } + @media (min-width: 768px) { ... }
• 推荐写法：顶部写手机样式，然后只用 @media (min-width: 768px)、@media (min-width: 1024px) 等逐级增强

宽度比高度可靠，别碰 max-height

地址栏滚动时收起/展开，window.innerHeight 会跳变，max-height 断点极易误触发。而视口宽度稳定，且和设计稿切图逻辑一致（如 750px / 2 = 375px）。

• 所有主流手机视口宽度集中在 320px–414px 区间
• iPad mini 竖屏是 768px，别用 max-width: 768px “通吃手机”，会把它也卷进来