响应式与移动端

视口与媒体查询

<meta name="viewport" content="width=device-width, initial-scale=1" />

@media (max-width: 768px) {
  .sidebar { display: none; }
}

常用断点需按设计稿调整，避免机械照搬固定像素。

---

长度单位

单位	说明
px	物理像素逻辑映射，适合边框、阴影
%	相对父元素
em	相对当前元素 font-size
rem	相对根元素 font-size，适合做全局缩放
vw / vh	视口比例，注意移动端 100vh 与地址栏动态高度问题

---

rem 适配思路（简述）

1. 设计稿基准宽度（如 375）与基准 font-size。
2. JS 或 CSS clamp 根据视口设置 html { font-size: … }。
3. 属性用 rem 书写，实现整体等比。

也可用 postcss-pxtorem 从 px 自动转换。

---

小于 12px 字体

部分移动端浏览器对中文有 最小字号限制。可行方向：

• 使用 transform: scale() 视觉缩小（占位空间需自行处理）。
• 换用 SVG / 图片 承载极小标注。
• 评估可读性，尽量避免过小字号。

---

小结

响应式 = viewport + 媒体查询 + 弹性单位（rem/vw/flex/grid）；移动端额外注意 触控区域、最小字号与 1px 边框（border-width: 0.5px 或伪类缩放等 hack）。