template-10556/docs/PC端手机版样式指南.md

PC端显示手机版样式指南

功能说明

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

实现原理

通过CSS媒体查询和容器限制，在PC端（屏幕宽度≥768px）时：

1. 限制页面最大宽度为414px（iPhone 6/7/8 Plus尺寸）
2. 页面居中显示
3. 添加阴影和圆角效果，模拟手机屏幕
4. 设置渐变背景，增强视觉效果

使用方法

1. 页面组件包装

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

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

2. 样式文件引入

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

// 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端手机版显示支持：

// 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特性。