# CSS 值和单位

Lynx 支持的 CSS 值类型和单位。

## 长度单位

### 绝对单位

- `px` - 像素（最常用）

### 相对单位

- `%` - 相对于父元素
- `vw` - 视口宽度的百分比（viewport width）
- `vh` - 视口高度的百分比（viewport height）
- `rem` - 相对于根元素字体大小（**推荐**）
- `em` - 相对于字体大小
- `rpx` - 响应式像素（Lynx 特有，自动适配屏幕宽度）

### 不支持的单位

- ❌ `cm`, `mm`, `in`, `pt`, `pc` - 物理单位
- ❌ `ch`, `ex` - 字体相关
- ❌ `vmin`, `vmax`（部分支持）

Lynx 不会在运行时把不支持的 CSS 单位自动归一化为 `px`。如果样式来自 Web、设计系统或外部配置，应在样式生成前转换为 Lynx 支持的单位；不要把 `in`、`pt`、`ex` 等不支持单位直接输出到 Lynx 样式中。

对于 Web CSS 中的 `in`，Lynx 仍不原生支持，但样式生成或迁移层可以按 CSS 绝对长度规则转换后输出：`1in = 96px`，例如 `0.25in = 24px`、`1.25in = 120px`。这个转换不随 Android、iOS 或设备物理 DPI 改变。其他不支持单位仍应视为不支持；本文档不提供明确转换方式。除非迁移层有明确规则，不要自动类推为可转换单位，尤其不要把字体相关单位（如 `ex`、`ch`）转换为通过证据。

## rem 响应式适配（推荐）

推荐使用 `rem` 配合 `vw` 实现响应式适配，这是 Web 标准的方案，具有更好的兼容性。

```css
/* 在根元素设置基准字体大小 */
page {
  font-size: calc(100vw / 23.4375); /* 1rem = 16px @ 375px 宽度 */
}

/* 使用 rem 进行屏幕适配 */
.container {
  width: 100%;
  padding: 2rem; /* 32px @ 375px */
}

.card {
  width: 21.4rem; /* 约 342px @ 375px */
  margin: 1rem;
}
```

**设置方法**：

1. 在 `page` 元素上设置 `font-size: calc(100vw / 23.4375)`
2. 基准计算公式：`基准宽度 / 期望的基准字体大小`（如 375px / 16px = 23.4375）
3. 所有尺寸使用 rem 单位

## rpx 响应式像素（Lynx 特有）

⚠️ **注意**：`rpx` 是 Lynx **特有**的单位，不具备 Web 兼容性。若需同时支持 Web 渲染，建议使用 `rem`。

`rpx` 会根据屏幕宽度自动缩放，实现原理：`value × screen_width / 750`，功能完整且适用于自适应布局。

**换算规则**（以 750rpx 为基准宽度）：

- 在 375px 宽度的屏幕上：1rpx = 0.5px
- 在 750px 宽度的屏幕上：1rpx = 1px
- 在 1125px 宽度的屏幕上：1rpx = 1.5px

```css
/* 全宽 */
.full-width {
  width: 750rpx;
}

/* 半宽 */
.half-width {
  width: 375rpx;
}
```

**rpx 使用场景**：

- 仅用于 Lynx 项目且不需要 Web 兼容性时
- 需要随屏幕宽度缩放的大小

## 颜色值

### 颜色名称

```css
color: red;
background-color: blue;
border-color: transparent;
```

### 十六进制

```css
/* 简写 */
color: #f00;

/* 完整 */
color: #ff351a;

/* 带透明度 */
color: #ff351a80; /* 50% 透明 */
color: rgba(255, 53, 26, 0.5);
```

### RGB/RGBA

```css
color: rgb(255, 53, 26);
color: rgba(255, 53, 26, 0.5);
```

### HSL/HSLA

```css
color: hsl(9, 100%, 55%);
color: hsla(9, 100%, 55%, 0.5);
```

## 数值

```css
/* 无单位数字 */
opacity: 0.5;
flex-grow: 1;
z-index: 100;
line-height: 1.5;

/* 带单位 */
width: 100px;
font-size: 14px;
```

## 百分比

```css
/* 相对于父元素宽度 */
width: 50%;

/* 相对于父元素高度 */
height: 100%;

/* 相对于字体大小 */
line-height: 150%;
```

## 特殊值

### auto

```css
width: auto;
height: auto;
margin: auto;
```

### none

```css
display: none;
background: none;
border: none;
```

### inherit

```css
color: inherit;
font-size: inherit;
```

### initial

```css
color: initial;
```

### 全局关键字

- `initial` - 初始值
- `inherit` - 继承父元素

## 字符串

```css
/* 字体名称 */
font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;

/* 图片 URL */
background-image: url('https://example.com/image.png');
```

## 函数

### 计算

```css
/* calc 部分支持 - 仅用于长度属性 */
width: calc(100% - 20px);
height: calc(50% + 100px);
padding: calc(var(--base) * 2);
```

**支持 calc() 的属性：**

- 尺寸：`width`, `height`, `min-width`, `max-width`, `min-height`, `max-height`
- 盒模型：`padding`, `margin`, `flex-basis`
- 间距：`gap`, `column-gap`, `row-gap`

**不支持 calc() 的属性：**

- 枚举值属性：`flex-direction`, `justify-content`, `linear-orientation` 等
- 整数值属性：`order`, `z-index`, `font-weight` 等
- 颜色属性：`color`, `background-color` 等

### 环境变量

```css
/* 安全区域 */
.safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
```

### 渐变色

```css
/* 线性渐变 */
background: linear-gradient(to bottom, #ff351a, #00ebeb);
background: linear-gradient(45deg, #ff351a 0%, #00ebeb 100%);

/* 径向渐变 */
background: radial-gradient(circle, #ff351a, #00ebeb);
```

### 动画时间函数

用于 `transition-timing-function`、`animation-timing-function` 等属性。

#### 关键字

- `linear`
- `ease`（在 Lynx 中等价于 `ease-in-out`）
- `ease-in`
- `ease-out`
- `ease-in-out`
- `ease-in-ease-out`（Lynx 中的 `ease`/`ease-in-out` 同义词）
- `step-start`（等价于 `steps(1, start)`）
- `step-end`（等价于 `steps(1, end)`）

> **注意**：在 Lynx 引擎内部，`ease`、`ease-in-out`、`ease-in-ease-out` 均映射到同一种时间函数；这与 Web CSS 标准不同（Web 中 `ease` 和 `ease-in-out` 是两条不同的贝塞尔曲线）。

#### 函数

```css
/* 自定义贝塞尔曲线 */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* 步进函数 - 必须带方向参数 */
animation-timing-function: steps(5, end);
animation-timing-function: steps(3, jump-start);
animation-timing-function: steps(4, jump-none);
animation-timing-function: steps(4, jump-both);

/* Lynx 特有扩展 */
transition-timing-function: square-bezier(1, 0.5);
```

**`cubic-bezier(...)` 说明**：
- 语法为 `cubic-bezier(x1, y1, x2, y2)`
- 超出 `[0, 1]` 范围的控制点会被解析并生效
- 当 x 坐标超出 `[0, 1]` 时，引擎会使用起点/终点的梯度进行线性外推，不会报错或被截断
- 若 x1 和 x2 都在 `[0, 1]` 内，曲线是单调递增的；超出该范围时曲线可能非单调

**`steps(...)` 说明**：
- 语法为 `steps(n, direction)`，**必须**包含方向参数
- 不支持省略方向参数的 `steps(1)` 写法（会被视为无效）
- 支持的 direction：`start`、`jump-start`、`end`、`jump-end`、`jump-none`、`jump-both`

## 内在尺寸

### 支持的值

- ✅ `max-content` - 内容最大宽度
- ✅ `fit-content` - 适应内容宽度

```css
.container {
  width: max-content; /* 根据内容自动调整 */
  width: fit-content; /* 适应内容，不超过容器 */
}
```

### 部分支持

- ⚠️ `min-content` - 在大多数情况下支持，但在 `flex-basis` 中会被视为 0px

```css
/* ✅ 支持 */
.container {
  width: min-content;
}

/* ❌ 不支持 - 在 flex-basis 中视为 0px */
.flex-item {
  flex-basis: min-content; /* 不要这样用 */
}
```