移动端优先是 tailwind 默认工作方式，必须添加 ，sm: 等断点基于 min-width 触发，类名顺序影响样式覆盖，自定义断点需按实际设备需求调整。
移动端优先不是口号，是 Tailwind 的默认工作方式；不按这个逻辑写，sm:、md: 类会失效，布局在真机上直接错乱。
必须加 <meta name="viewport">，否则所有响应式类白写
浏览器默认把页面当桌面渲染，缩成一团、横向滚动、sm: 根本不触发——这不是 Tailwind 的问题，是缺失视口声明的必然结果。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在里，且不能漏掉initial-scale=1.0 - 用 Next.js / Nuxt 等框架时，检查是否被自动生成的
viewport覆盖（比如带了user-scalable=no） - 真机调试前先用 Chrome DevTools 的 Device Toolbar 选具体型号（如 iPhone 14），别只用 “Responsive” 模式糊弄
sm: 不生效？先确认设备宽度是否 ≥640px
Tailwind 的断点是 min-width，不是“当前屏幕宽度等于多少”。sm: 对应 640px，意思是「仅当屏幕宽度 ≥640px 时才启用」。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- iPhone SE 竖屏（375px）→ 只走无前缀类（即默认移动端样式）
- iPhone 14 横屏（844px）→ 触发
sm:，但不触发md:（需 ≥768px） - 想强制小屏也生效？改配置或用
@screen sm { }写内联 CSS，但这违背移动优先原则，慎用
类名顺序写反了，md:w-1/2 w-full 就是错的
Tailwind 是按 HTML 中类名出现顺序应用样式的。后写的类会覆盖前面同属性的类，但仅在对应断点生效。
- 正确写法：
w-full md:w-1/2→ 默认全宽，≥768px 时占一半 - 错误写法：
md:w-1/2 w-full→ 先设 md 下为 1/2，再无条件覆盖成 full，导致 md 断点失效 - 常见组合：卡片列表用
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3；按钮组用flex flex-col space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0
自定义断点别硬套默认值，尤其安卓平板容易卡在缝隙里
默认 md: 768px 对 iPad 竖屏友好，但某些安卓平板（如 800×1280 分辨率）实际宽度是 800px，既不算 md（768px）也不算 lg（1024px），布局可能突然跳变。
- 查设计稿真实需求，比如产品明确要求“720px 切换布局”，就该在
tailwind.config.js中改screens.md - 示例配置：
md: '720px'，而不是盲目沿用默认值 - 修改后记得重启开发服务器，否则新断点不会生效
最常被忽略的其实是类名顺序和 viewport 声明——这两处出错，其他所有响应式逻辑都建立在流沙之上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
