# 响应式设计

在 Lynx 中实现响应式布局。

## 使用 rem + vw 自动适配（推荐）

> **推荐方案**：使用 `rem` 配合 `vw` 设置根字体大小。`rpx` 是 Lynx 特有单位，功能完整但缺乏 Web 兼容性。

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

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

.card {
  width: 21.4rem; /* 约一半宽度，减去间距 */
  margin-bottom: 1.5rem;
}

/* 字体大小 */
.title {
  font-size: 2.25rem; /* 约 18px @ 375px 屏幕 */
}

.body {
  font-size: 1.75rem; /* 约 14px @ 375px 屏幕 */
}
```

## 使用视口单位（vw/vh）

⚠️ **注意**：Lynx **不支持** CSS `@media` 媒体查询。请使用视口单位实现流式布局。

```css
/* 使用 vw 代替 @media */
.container {
  display: flex;
  flex-direction: column;
  padding: 4vw; /* 随视口宽度自动调整 */
}

/* 大屏幕优化 */
.sidebar {
  width: 26vw; /* 约 200px @ 768px 宽度 */
}

.main {
  flex: 1;
}
```

## 响应式网格

使用 Grid 布局配合百分比或 vw 单位：

```css
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr; /* 移动端：1列 */
}

/* 使用 CSS 变量 + 容器查询思路（如果支持） */
```

## Flex 响应式布局

```css
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.flex-item {
  flex: 1 1 40vw; /* 随视口宽度自动调整 */
}
```

## 安全区域适配

```css
/* iPhone 刘海屏适配 */
.safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 底部固定按钮 */
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
}
```

## JavaScript 动态响应式

使用 JavaScript 监听视口变化并动态调整样式：

```javascript
// 获取视口尺寸
const viewportWidth = window.screen.width || 375;
const viewportHeight = window.screen.height || 667;

// 根据视口宽度决定布局
function getLayoutClass(width) {
  if (width >= 1024) return 'desktop-layout';
  if (width >= 768) return 'tablet-layout';
  return 'mobile-layout';
}

// 应用到组件
const layoutClass = getLayoutClass(viewportWidth);
```

配合条件渲染：

```jsx
<view className={isTablet ? 'tablet-layout' : 'mobile-layout'}>
  {isTablet ? <Sidebar /> : null}
  <MainContent />
</view>
```

```css
.tablet-layout {
  display: flex;
  flex-direction: row;
}

.mobile-layout {
  display: flex;
  flex-direction: column;
}
```

## 响应式最佳实践

1. **移动优先**: 先写移动端样式，再用 JavaScript 动态调整
2. **使用 rem**: 优先使用 rem 进行屏幕适配（配合 vw 设置根字体大小）
3. **使用视口单位**: 使用 vw/vh 实现流式布局
4. **断点选择**（JavaScript 中处理）:
   - 320px - 小屏手机
   - 375px - iPhone 标准
   - 414px - iPhone Plus
   - 768px - iPad 竖屏
   - 1024px - iPad 横屏
5. **测试**: 在多种设备上测试

## 常见陷阱

### ❌ 不要使用 @media

```css
/* ❌ 不支持 - 不会生效 */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}
```

### ✅ 使用替代方案

```css
/* ✅ 使用 rem 和视口单位 */
.container {
  display: flex;
  flex-direction: column;
  padding: 4vw;
}

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

```javascript
// ✅ 使用 JavaScript 动态调整
const isWide = viewportWidth >= 768;
```