css3为移动端提供了完整的响应式基础设施，包括viewport元标签、@media查询、flex/grid布局及rem/vw单位，而css2仅依赖hack和js模拟，缺乏原生支持。
CSS3 在移动端适配上不是“比 CSS2 多几个属性”那么简单，而是提供了整套可落地的响应式基础设施；CSS2 几乎没有原生支持手段，硬靠 hack 和 JS 模拟。
viewport 元标签是 CSS3 适配的前提
CSS2 完全不感知设备视口，<meta name="viewport"> 是 HTML5 + CSS3 生态才确立的标准机制。没有它，width=device-width 这类声明就无效，所有媒体查询、rem 计算、flex 布局都会在 iOS Safari 等浏览器里失准——比如页面被自动缩放成小字、横向滚动条莫名出现。
- 必须写在
里，且不能被 JS 动态插入（部分 Android WebView 会忽略） -
initial-scale=1.0要显式声明，否则某些安卓浏览器默认用 0.8 缩放 -
user-scalable=no尽量避免，会影响可访问性，且 iOS 10+ 已限制其生效
@media 查询在 CSS3 中才真正可用
CSS2 的媒体类型（如 screen、print）只能粗粒度区分设备类型，无法读取屏幕宽度。CSS3 的 @media 才支持 min-width、max-width、orientation 等条件，这才是移动端断点适配的根基。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- CSS2 写
@media screen { ... }只能切换整页样式，不能做精细断点 - CSS3 支持嵌套媒体查询（需 PostCSS 插件），但原生只认顶层
@media - 注意：iOS Safari 对
device-width的解析有历史 bug，优先用width（视口宽度）而非device-width
flex 和 grid 布局彻底改变适配逻辑
CSS2 时代靠浮动 + 负 margin + 清除浮动来模拟“自适应”，极易崩坏；CSS3 的 display: flex 和 display: grid 是真正的布局引擎，让“一行三列随屏宽自动换行”这种需求不再需要 JS 或媒体查询干预。
-
flex-wrap: wrap+flex-basis组合，比百分比 +float更稳定 -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))这种写法在 CSS2 里根本不存在 - 注意：旧版 iOS Safari（≤9.3）对
flex的align-items和justify-content有兼容问题，需加-webkit-前缀
rem/vw 单位依赖 CSS3 的根元素计算能力
CSS2 只有 px、%、em，而 rem（相对于 :root 字体大小）和 vw（视口宽度 1%）都是 CSS3 新增单位。它们让“一套代码适配 iPhone SE 到 iPad Pro”成为可能，但前提是浏览器支持 CSS3 的计算上下文。
-
rem需配合 JS 动态设置html根字体（如 flexible 库），CSS2 无法触发该计算链 -
vw在 iOS Safari 7.1+ 才稳定支持，早期版本会把软键盘弹出时的视口变化也计入vw，导致布局跳变 - 慎用
vmin/vmax：Android 4.4 WebView 对它们的支持不一致，容易引发高度塌陷
真正容易被忽略的不是语法差异，而是 CSS3 适配方案依赖一整套运行时环境：viewport 设置是否生效、媒体查询是否被解析、flex 是否触发重排、rem 是否被正确计算——任何一个环节断掉，整个适配链就失效。别只盯着写法，先确认目标浏览器的 CSS3 支持基线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
