199 lines
4.3 KiB
Markdown
199 lines
4.3 KiB
Markdown
---
|
||
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;
|
||
}
|
||
|
||
以上规范旨在创建高质量的移动端页面，确保良好的用户体验和开发效率。使用时可根据具体项目需求进行调整。
|
||
|
||
请确保设计遵循以上规范，创建清晰、易用、美观的移动端页面。
|