Media Queries 需配合 viewport meta 标签生效，按视口宽度（非物理分辨率）匹配条件，推荐移动端优先、min-width 断点，结合 clamp() 等实现弹性布局。

Media Queries 的基本写法和触发条件

响应式设计的核心是 @media 规则，它不是“自动适配”，而是按你定义的条件（比如视口宽度）匹配后才应用样式。浏览器只在满足条件时解析并生效其中的 CSS，不匹配就跳过。

• @media screen and (max-width: 768px) 中的 screen 是可选媒体类型，现代项目通常省略；max-width 指视口宽度 ≤ 768px 时生效（注意：是 viewport 宽度，不是设备物理分辨率）
• 必须用 px、em 或 rem 等绝对/相对单位，不能用百分比或 vh/vw 做断点值（它们本身是动态单位，不能用于媒体查询条件）
• 移动端 Safari 和旧版 Android 浏览器对 orientation 支持不稳定，慎用 (orientation: landscape) 做核心布局判断

移动端优先还是桌面端优先？怎么选断点

主流做法是移动端优先（mobile-first），即先写小屏样式，再用 min-width 逐步增强。这不是教条，而是因为小屏约束更强、逻辑更清晰——大屏样式往往只是“加点东西”，而小屏要“删减+重构”。

• 不要按 iPhone/Android 具体型号设断点，比如 375px、414px；应基于内容溢出、行高挤压、按钮太小等实际问题出现的位置反推断点
• 典型断点建议：768px（平板竖屏临界）、1024px（常见笔记本窄屏）、1200px（宽屏内容区上限），全部用 min-width 向上扩展
• 避免断点碎片化：4 个以上断点会让维护成本陡增，多数项目 2–3 个足够

常见错误：viewport meta 标签漏掉或写错

@media 生效的前提是页面正确声明了视口。没有它，移动端浏览器会以 980px 左右的虚拟宽度渲染，导致 max-width: 768px 根本不触发。

Android Remote Control

远程控制 Android 设备，支持截图、自动化操作手机 App 等功能。本应用使用 uiautomator2 作为底层框架，通过 ADB 连接设备，用户无需 Root（1）查看手机屏幕；（2）自动化操作手机 App；（3）远程安装/卸载应用……

下载

• 必须在 <head> 中加入：<meta name="viewport" content="width=device-width, initial-scale=1">
• width=device-width 不是固定值，而是映射到设备的 CSS 像素宽度；initial-scale=1 防止 iOS Safari 自动缩放
• 如果用了 user-scalable=no 或 maximum-scale=1，会影响可访问性，WCAG 不推荐

配合 rem/vw 实现真正弹性布局

仅靠 Media Queries 切换整套样式不够灵活，尤其字体、间距这类细节。需要结合相对单位才能平滑过渡。

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

• 用 vw 做响应式字号（如 font-size: 4vw）时，注意最小值限制，否则小屏文字过小：可搭配 clamp(16px, 4vw, 24px)
• 用 rem + JS 动态改根元素 font-size 也能实现类似效果，但增加了运行时依赖；纯 CSS 的 clamp() 更轻量且兼容性已覆盖 Chrome 88+/Safari 13.1+
• 慎用 em 嵌套：它继承父元素字号，多层嵌套后容易失控；rem 始终相对于根元素，更可控

实际项目里最常被忽略的是：断点值没和设计稿的“内容容器宽度”对齐，而是照抄框架默认值；还有就是忘了测试横屏切换时的重绘行为——某些安卓 WebView 在 orientation 变化时不触发 @media 重计算，得监听 window.resize 手动补救。