当前位置：首页 > news >正文

【css】你还在使用 pt 作为尺寸单位吗？

news 2026/3/26 23:23:36

rem + px是目前（2025–2026 年）现代 Web 项目中最主流、最被广泛推荐的单位组合策略。

几乎所有主流设计系统、UI 框架（Tailwind、Shadcn/ui、Material UI、Chakra UI、Ant Design 等）和权威指南都采用这种混合方式。

核心原则（为什么这样组合最好）

rem：负责可访问性+整体协调性+用户字体缩放友好
→ 所有跟文字大小相关或应该跟随文字节奏的尺寸都用 rem
px：负责像素级精确+视觉一致性+不希望随字体缩放而改变的细节
→ 细线、阴影、图标、边框、最小可触控区域等用 px

用途类别	首选单位	推荐理由 / 典型值示例	例外情况（少数用另一种）
根字体基准	px 或 %	`html { font-size: 62.5%; }`或`16px`	—
所有文字大小（body, h1–h6, p, label 等）	rem	`1.6rem`(≈16px),`2.4rem`,`1.125rem`等	极少数固定像素文字（如水印）
段落行高	无单位 / rem	`line-height: 1.5;`或`1.625`	—
组件/卡片/区块的 padding	rem	`padding: 1.5rem 2rem;`	极薄内边距（如 2px）
组件/卡片/区块的 margin	rem	`margin: 2rem 0;`或设计系统 token 如`var(--space-4)`	—
按钮/输入框内边距	rem或 em	`padding: 0.75rem 1.5rem;`	极小按钮用 px
图标大小	px	`width: 20px; height: 20px;`或`1.25rem`（争议中）	有些团队全用 rem
边框粗细	px	`border: 1px solid #ddd;`	几乎从不用 rem
box-shadow 模糊半径/偏移	px	`box-shadow: 0 4px 6px rgba(0,0,0,0.1);`	几乎从不用 rem
圆角	px或 rem	`border-radius: 6px;`或`0.375rem`（两种都常见）	—
最小可点击/触摸区域	px	`min-width: 44px; min-height: 44px;`	—
固定宽度容器（如 modal）	rem	`max-width: 32rem;`	极窄像素级（如广告位）
1px 分割线 / hairline	px	`border-bottom: 1px solid;`	—

经典起点写法（最常见设置）

/* 1. 推荐的根设置（让 1rem = 10px，计算方便） */html{font-size:62.5%;/* 浏览器默认 16px → 10px */}/* 2. body 恢复成常见的 16px */body{font-size:1.6rem;/* 1.6 × 10px = 16px */line-height:1.5;/* 无单位，最安全 */}/* 3. 标题示例 */h1{font-size:3.2rem;margin-bottom:1.6rem;}/* 32px + 16px 间距 */h2{font-size:2.4rem;margin:2rem 0 1rem;}h3{font-size:1.8rem;}/* 4. 常见组件示例 */.card{padding:1.5rem;border:1px solid #e5e7eb;/* px 边框 */border-radius:0.5rem;/* rem 圆角也常见 */box-shadow:0 1px 3pxrgba(0,0,0,0.1);/* px 阴影 */}.btn{padding:0.75rem 1.5rem;/* rem 跟随文字舒服 */font-size:1rem;min-height:44px;/* px 保证触摸 */border-radius:6px;/* px 或 0.375rem 都行 */}.icon{width:24px;height:24px;}