核心答案：rem = 根元素字号倍数（浏览器默认 16px，故 1rem=16px；html 设 font-size:62.5% 后 1rem=10px）；宽高比换算高度=宽度÷比值（16:9 即 1.778）；WCAG 2.1 要求正文对比度 ≥4.5:1（AA）；移动端适配只需一行 。
px 与 rem 怎么换算
公式：rem = px ÷ 根字号。根字号默认 16px。
| 目标 px | ÷16（默认） | ÷10（62.5% 技巧） |
|---|---|---|
| 12px | 0.75rem | 1.2rem |
| 14px | 0.875rem | 1.4rem |
| 16px | 1rem | 1.6rem |
| 24px | 1.5rem | 2.4rem |
| 32px | 2rem | 3.2rem |
62.5% 技巧：html { font-size: 62.5% }（16×62.5%=10px），之后心算直接除 10。代价是会继承影响未显式设置字号的元素，body 上记得补 font-size: 1.6rem。
注意 em 与 rem 的区别：em 相对父元素字号，嵌套会逐层放大；rem 永远相对根元素，可预测——组件开发优先 rem。
常用宽高比速查表
| 比例 | 小数 | 常见用途 |
|---|---|---|
| 16:9 | 1.778 | 视频、幻灯片 |
| 4:3 | 1.333 | 传统电视、iPad |
| 3:2 | 1.5 | 相机照片 |
| 1:1 | 1.0 | 头像、方图 |
| 9:16 | 0.5625 | 竖屏短视频 |
| 21:9 | 2.333 | 带鱼屏电影 |
CSS 保持比例用 aspect-ratio: 16/9（现代浏览器原生支持），老旧方案是 padding-top: 56.25%（9÷16） hack。
WCAG 对比度标准
| 等级 | 正文（<18pt） | 大字（≥18pt/粗体14pt） | 适用 |
|---|---|---|---|
| AA（及格线） | 4.5:1 | 3:1 | 法律法规普遍要求 |
| AAA（增强） | 7:1 | 4.5:1 | 政府/医疗/无障碍场景 |
对比度范围 1:1（同色）到 21:1（纯黑白）。浅灰文字配白底（如 #999 on #fff = 2.85:1）是最常见的不达标案例。用[颜色对比度检查器](/c/dev/contrast-check)输入前景背景色直接判定 AA/AAA，并给出达标修正建议。
Meta 标签最小集
```html
```
SEO 分享再加 Open Graph：og:title/og:description/og:image/og:url。完整生成可用 [Meta 标签生成器](/c/dev/meta-generator)，填表即出全套代码。
实例：750 设计稿转 rem
设计稿宽 750px（iPhone 6/7/8 二倍图），某按钮标注宽 320px：
- 约定根字号：
html { font-size: 62.5% }→ 1rem=10px（默认字体 16px 基准） - 但 750 稿是 2 倍图，逻辑宽度 375 → 按 375 屏宽配根字号 37.5px（
font-size: calc(100vw/10)） - 按钮 320px ÷ 37.5 = 8.533rem（二倍稿直接 ÷2 ÷37.5 或 ÷75）
验算：[px↔rem 换算器](/c/dev/px-rem) 支持自定义根字号，输入即出。
实例：修复对比度不达标
设计稿按钮文字 #FFFFFF 配背景 #F59E0B（amber-500）：
- 检查器实测：对比度 2.14:1 → AA 正文要求 4.5:1，严重不达标
- 方案 A 加深背景 → #B45309（amber-700）：4.83:1 ✓ AA 通过
- 方案 B 保留品牌色改深色文字 #451A03：4.62:1 ✓ 通过
常见误区
- em/rem 混用嵌套爆炸：父级 1.2em、子级再 1.2em → 实际 1.44 倍，三层就失控。统一 rem 或限定 em 只做内边距类局部缩放。
- 用 width/height 写死视频尺寸：换容器就变形。
aspect-ratio+width:100%才是响应式正解。 - 对比度只看 AA 正文：图标与表单边框属于「非文本 UI」，AA 也要求 3:1——浅灰 placeholder 经常踩线。
- viewport 里加 user-scalable=no：挡掉缩放也挡掉了弱视用户的无障碍能力，苹果已在 Safari 忽略该属性——不要加。