移动端优先设计先写小屏幕基础样式，再用min-width媒体查询逐级增强；基础CSS适配320px–480px，viewport标签确保缩放一致，断点依内容而定，慎用max-width和多条件组合。
移动端优先设计意味着先写适用于小屏幕（如手机）的基础样式，再用媒体查询在更大屏幕上逐步增强或调整样式。媒体查询规则要从最小宽度开始向上扩展，避免重复覆盖，也更符合渐进增强逻辑。
基础样式默认适配移动端
所有不带媒体查询的 CSS 规则都应针对移动设备编写：字体大小、行高、按钮尺寸、间距等按 320px–480px 屏宽优化。这样确保即使不支持媒体查询的老设备也能正常显示核心内容。
使用 min-width 逐级增强桌面样式
在需要为更大屏幕调整时，用 min-width 而非 max-width，例如：
- 481px 起适配平板横屏：@media (min-width: 481px) { ... }
- 768px 起适配平板竖屏及以上：@media (min-width: 768px) { ... }
- 1024px 起适配桌面：@media (min-width: 1024px) { ... }
这种写法保证样式层层叠加，不会因顺序或覆盖逻辑出错。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
避免固定像素断点，考虑视口而非设备
断点应基于内容布局需求，而不是具体机型。比如导航栏从垂直堆叠变为水平排列，应在内容自然撑开时触发，而不是硬写 768px。可结合 viewport meta 标签 确保缩放行为一致：<meta name="viewport" content="width=device-width, initial-scale=1">
慎用 max-width 和多条件组合
除非必要（如仅在某段区间生效），尽量少用 max-width 或 and 多条件查询，否则容易导致维护困难和覆盖冲突。例如：@media (min-width: 768px) and (max-width: 1023px) 容易遗漏边界情况，不如拆成两个 min-width 规则更清晰可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
