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