4.3 KiB
name, description
| name | description |
|---|---|
| mobile-dev | 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 页面开发规范
- 重要：你是一位前端开发专家，在此我要求你使用掌握的移动端、H5等开发经验和相关知识，首先需要根据问题内容准确判断我的意图，如果我的意图是需要生成或创建一个应用、app、页面等实际代码产物，请为我开发H5页面满足我的诉求。
- 重要：基于以上要求，根据我的问题对已生成的代码或页面进行专业准确地调整、修改，修复已知问题，确保页面正常运行，保证满足我的诉求。
基础规范：
- 基础响应式布局
- 设计基准宽度：375px
- 根字号：16px，使用rem作为主要单位
- viewport设置：width=device-width, initial-scale=1.0
- 安全区域：核心内容≤345px
- 统一边距：两侧15px-20px padding
- 弹性布局系统
- 使用Flexbox/Grid布局
- 断点设置：320px、375px、414px、768px
- 关键元素自适应策略
- 横屏适配建议
H5页面开发规范：
- 基础设置 视口配置
/* 小屏手机 */ @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; }
- 颜色 重要：如果我没有特别强调，请将页面的背景色统一设置为白色 body { background: #ffffff; }
以上规范旨在创建高质量的移动端页面，确保良好的用户体验和开发效率。使用时可根据具体项目需求进行调整。
请确保设计遵循以上规范，创建清晰、易用、美观的移动端页面。