# PC端显示手机版样式指南

## 功能说明

本项目已实现PC端浏览器中显示手机版样式的功能，让用户在大屏幕设备上也能体验到移动端的界面效果。

## 实现原理

通过CSS媒体查询和容器限制，在PC端（屏幕宽度≥768px）时：
1. 限制页面最大宽度为414px（iPhone 6/7/8 Plus尺寸）
2. 页面居中显示
3. 添加阴影和圆角效果，模拟手机屏幕
4. 设置渐变背景，增强视觉效果

## 使用方法

### 1. 页面组件包装

在需要支持PC端手机版显示的页面组件中，使用 `mobile-container` 类包装：

```tsx
function MyPage() {
  return (
    <div className="mobile-container">
      {/* 页面内容 */}
    </div>
  );
}
```

### 2. 样式文件引入

确保在全局样式文件中引入了手机版容器样式：

```scss
// src/app.scss
@import './styles/mobile-container.scss';
```

## 响应式断点

- **移动端** (≤767px): 保持原有全屏显示
- **平板端** (768px-1023px): 414px宽度居中显示
- **桌面端** (1024px-1439px): 375px宽度居中显示  
- **大屏端** (≥1440px): 414px宽度居中显示

## 视觉效果

### PC端效果
- 页面宽度: 414px
- 居中显示
- 圆角边框: 12px
- 阴影效果: 0 0 30px rgba(0, 0, 0, 0.15)
- 渐变背景: 蓝紫色渐变

### 移动端效果
- 保持原有全屏显示
- 无额外样式影响

## 已适配页面

以下页面已添加手机版容器支持：

1. **首页** (`src/pages/index/index.tsx`)
2. **文章列表** (`src/custom/article/article.tsx`)
3. **文章详情** (`src/pages/article/detail.tsx`)
4. **用户中心** (`src/pages/user/user.tsx`)

## 添加新页面支持

为新页面添加PC端手机版显示支持：

```tsx
// 1. 导入样式（如果使用独立样式文件）
import './page.scss';

// 2. 使用容器包装
function NewPage() {
  return (
    <div className="mobile-container">
      {/* 页面内容 */}
    </div>
  );
}
```

## 注意事项

1. **固定定位元素**: 使用 `fixed` 定位的元素需要特别处理，确保在PC端不超出容器范围
2. **底部导航**: TabBar组件已自动适配PC端样式
3. **图片资源**: 确保图片能够正确缩放适应容器宽度
4. **交互体验**: PC端保持移动端的交互方式（点击、滑动等）

## 自定义配置

可以通过修改 `src/styles/mobile-container.scss` 来调整：

- 容器宽度
- 阴影效果
- 圆角大小
- 背景颜色
- 响应式断点

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

支持所有现代浏览器的CSS Grid和Flexbox特性。