---
name: mobile-dev
description: Develops responsive mobile H5 pages with 375px base width, rem units, and flexbox layouts. Use when building mobile apps, H5 pages, or responsive mobile layouts. Don't use for desktop-only web apps or native mobile development.
---
# 移动端 H5 页面开发规范

1. 重要：你是一位前端开发专家，在此我要求你使用掌握的移动端、H5等开发经验和相关知识，首先需要根据问题内容准确判断我的意图，如果我的意图是需要生成或创建一个应用、app、页面等实际代码产物，请为我开发H5页面满足我的诉求。
2. 重要：基于以上要求，根据我的问题对已生成的代码或页面进行专业准确地调整、修改，修复已知问题，确保页面正常运行，保证满足我的诉求。

基础规范：
1. 基础响应式布局
- 设计基准宽度：375px
- 根字号：16px，使用rem作为主要单位
- viewport设置：width=device-width, initial-scale=1.0
- 安全区域：核心内容≤345px
- 统一边距：两侧15px-20px padding

2. 弹性布局系统
- 使用Flexbox/Grid布局
- 断点设置：320px、375px、414px、768px
- 关键元素自适应策略
- 横屏适配建议

H5页面开发规范：
1. 基础设置
视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
设计基准
基准设备宽度: 375px
根字号(Root Font Size): 16px
主要使用单位: rem
安全区域宽度: ≤345px
页面边距: 15px-20px padding
2. 响应式布局
断点设置

/* 小屏手机 */
@media screen and (max-width: 320px) { }

/* 标准手机 */
@media screen and (min-width: 321px) and (max-width: 375px) { }

/* 大屏手机 */
@media screen and (min-width: 376px) and (max-width: 414px) { }

/* 平板设备 */
@media screen and (min-width: 415px) and (max-width: 768px) { }
布局系统
优先使用Flex布局
复杂网格使用Grid布局
避免固定宽度，使用flex、百分比等相对单位
适配策略

/* rem布局 - 动态设置根字号 */
html {
  font-size: calc(100vw / 375 * 16);
}

/* 安全区域 */
.container {
  max-width: 345px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 弹性盒子 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 响应式网格 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}
3. 交互优化
触控优化

/* 点击态 */
.btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 禁用点击高亮 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 平滑滚动 */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
横屏适配

@media screen and (orientation: landscape) {
  .container {
    max-width: 90vh;
    margin: 0 auto;
  }

  /* 建议横屏提示 */
  .landscape-tip {
    display: flex;
    position: fixed;
    z-index: 999;
  }
}
4. 性能优化
图片处理

/* 响应式图片 */
.responsive-img {
  max-width: 100%;
  height: auto;
}

/* 图片占位 */
.img-wrapper {
  position: relative;
  padding-top: 100%; /* 1:1 比例 */
}

.img-wrapper img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
动画性能

/* 硬件加速 */
.accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* 流畅动画 */
.smooth-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
5. 常用组件样式
按钮

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 1.5rem;
  border-radius: 22px;
  font-size: 0.875rem;
  font-weight: 500;
}
列表

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list-item {
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
表单

.form-input {
  width: 100%;
  height: 44px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.875rem;
}

.form-input:focus {
  border-color: #007aff;
  outline: none;
}

6. 颜色
重要：如果我没有特别强调，请将页面的背景色统一设置为白色
body {
  background: #ffffff;
}

以上规范旨在创建高质量的移动端页面，确保良好的用户体验和开发效率。使用时可根据具体项目需求进行调整。

请确保设计遵循以上规范，创建清晰、易用、美观的移动端页面。