112 lines
2.5 KiB
Markdown
112 lines
2.5 KiB
Markdown
# 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特性。
|