移动优先核心是默认小屏样式、全用min-width递进断点、viewport标签必须正确且置顶；禁用max-width降级、px单位和绝对定位，基础css须流式布局、触控友好、无障碍优先。
移动优先不是加个 @media 就算完事，核心在于**样式默认只写小屏、不写任何针对大屏的重置逻辑、所有断点都用 min-width 递进增强**。漏掉这三点，代码里堆再多媒体查询也还是“桌面优先改出来的假响应式”。
viewport meta 标签必须放在
这是整个移动优先链路的第一道闸门。浏览器没正确解析视口，后续所有 CSS 布局都会错位或缩放异常。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是唯一可靠写法；width=320或user-scalable=no硬编码会直接破坏 iOS Safari 的双击缩放和可访问性 - 这个标签必须在
最前面，不能被 JS 动态插入——某些安卓 WebView 在 DOM ready 后才执行 script，此时页面已渲染完成，补插无效 - 如果用了 Web App 模式（如 PWA），才考虑加
user-scalable=no；普通网站加了反而让视障用户无法放大文字
CSS 默认样式只面向手机，禁用 max-width 断点
很多开发者习惯先写桌面版再“适配手机”，结果是基础样式里塞满浮动、固定宽度、px 字体，再用 @media (max-width: 768px) 去覆盖——这本质是倒着来的修补，维护成本高、易遗漏。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 基础 CSS（无媒体查询）应默认单列、流式宽度、
rem或em字体、flex-direction: column，确保 iPhone SE（375px）也能正常阅读和点击 - 所有增强逻辑必须用
@media (min-width: 768px)、@media (min-width: 992px)这类递增式断点，而不是max-width降级式 - 不要在基础样式里写
.sidebar { display: none; }再靠媒体查询 show 出来——这等于默认隐藏重要内容；正确做法是默认显示，大屏时才用flex或grid把它并排布局
别用 px 控制间距和圆角，尤其在触摸区域
物理像素密度差异会让 2px 圆角在 iPhone 15 Pro（3x 屏）上几乎不可见，而 44px 按钮在 2x 屏上实际只有 22 物理像素宽，手指根本点不准。
- 按钮/链接最小尺寸建议用
min-width: 44px; min-height: 44px;，配合padding保证视觉大小，而不是只靠 width/height - 圆角统一用
border-radius: 0.25rem;或0.5rem;，rem会随根字体缩放，比px更适应不同 DPR - 避免
margin: 10px;这类固定值；改用margin-block: 1rem;或gap（Flex/Grid 容器内）更可控
触摸交互别盲目替换 click 事件
iOS 上 300ms 延迟确实存在，但直接绑 touchstart 并阻止默认行为，会同时干掉滚动、缩放、屏幕阅读器识别，得不偿失。
- 优先用
click，现代 iOS Safari 已对<button></button>和带role="button"的元素自动消除延迟 - 真要监听触摸（比如拖拽、长按），必须加
event.preventDefault()，但紧接着要手动补aria-pressed和role="button"，否则 VoiceOver 用户完全感知不到这是可操作元素 - 绝对不要在
scroll容器里监听touchmove并preventDefault()——iOS 上会导致原生滚动卡顿甚至失效，改用CSS touch-action: manipulation;更安全
最常被忽略的是：移动优先不是“做一套手机版再加点大屏样式”，而是从第一行 CSS 就拒绝假设用户有鼠标、有宽屏、有稳定网络。那些写在基础样式里的 float、position: absolute、font-size: 12px，才是真正的敌人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
