1
This commit is contained in:
张成
312
docs/LESS使用指南.md
Normal file
312
docs/LESS使用指南.md
Normal file
@@ -0,0 +1,312 @@
|
||||
# LESS 使用指南
|
||||
|
||||
## 概述
|
||||
|
||||
本项目已全面从 CSS 转换为 LESS，使用 LESS 的嵌套结构、变量、混合等特性来提高代码的可维护性和复用性。
|
||||
|
||||
## 🎯 LESS 的优势
|
||||
|
||||
### 1. **嵌套结构**
|
||||
- 更清晰的代码层次结构
|
||||
- 减少选择器重复
|
||||
- 提高代码可读性
|
||||
|
||||
### 2. **变量系统**
|
||||
- 统一的颜色、字体、间距管理
|
||||
- 快速修改全局样式
|
||||
- 减少重复值
|
||||
|
||||
### 3. **混合（Mixins）**
|
||||
- 可复用的样式块
|
||||
- 参数化样式
|
||||
- 减少代码重复
|
||||
|
||||
### 4. **函数和运算**
|
||||
- 动态计算尺寸
|
||||
- 颜色混合和透明度
|
||||
- 响应式断点管理
|
||||
|
||||
## 📁 文件结构
|
||||
|
||||
```
|
||||
src/assets/css/
|
||||
├── variables.less # 全局变量定义
|
||||
├── common.less # 通用样式
|
||||
├── animations.less # 动画效果
|
||||
├── mobile_responsive.less # 移动端响应式
|
||||
└── common_mobile.less # 通用移动端适配
|
||||
```
|
||||
|
||||
## 🔧 已配置的 LESS 功能
|
||||
|
||||
### 1. **全局变量**
|
||||
- 颜色系统（主色、成功、警告、错误等）
|
||||
- 字体系统（大小、行高、字重）
|
||||
- 间距系统（内边距、外边距）
|
||||
- 断点系统（移动端、平板、桌面）
|
||||
- 动画系统（时长、缓动、延迟）
|
||||
|
||||
### 2. **响应式混合**
|
||||
```less
|
||||
.mobile({
|
||||
// 移动端样式
|
||||
});
|
||||
|
||||
.tablet({
|
||||
// 平板端样式
|
||||
});
|
||||
|
||||
.desktop({
|
||||
// 桌面端样式
|
||||
});
|
||||
```
|
||||
|
||||
### 3. **设备检测混合**
|
||||
```less
|
||||
.touch-device({
|
||||
// 触摸设备样式
|
||||
});
|
||||
|
||||
.high-dpi({
|
||||
// 高分辨率屏幕样式
|
||||
});
|
||||
|
||||
.landscape({
|
||||
// 横屏模式样式
|
||||
});
|
||||
```
|
||||
|
||||
## 📝 使用方法
|
||||
|
||||
### 1. **引入变量文件**
|
||||
```less
|
||||
@import './variables.less';
|
||||
```
|
||||
|
||||
### 2. **使用变量**
|
||||
```less
|
||||
.button {
|
||||
background-color: @primary-color;
|
||||
padding: @padding-md;
|
||||
border-radius: @border-radius-base;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
```
|
||||
|
||||
### 3. **嵌套结构**
|
||||
```less
|
||||
.card {
|
||||
padding: @card-padding-base;
|
||||
border: @border-width-base solid @border-color;
|
||||
|
||||
.card-header {
|
||||
padding: @padding-md;
|
||||
border-bottom: @border-width-base solid @border-color-light;
|
||||
|
||||
.card-title {
|
||||
font-size: @font-size-h4;
|
||||
color: @heading-color;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: @padding-md;
|
||||
|
||||
.card-text {
|
||||
color: @text-color;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4. **使用混合**
|
||||
```less
|
||||
.responsive-button {
|
||||
.mobile({
|
||||
width: 100%;
|
||||
padding: @padding-sm;
|
||||
font-size: @font-size-sm;
|
||||
});
|
||||
|
||||
.tablet({
|
||||
width: auto;
|
||||
padding: @padding-md;
|
||||
font-size: @font-size-base;
|
||||
});
|
||||
|
||||
.desktop({
|
||||
padding: @padding-lg;
|
||||
font-size: @font-size-lg;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 5. **颜色操作**
|
||||
```less
|
||||
.button {
|
||||
background-color: @primary-color;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(@primary-color, 10%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(@primary-color, 10%);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: fade(@primary-color, 50%);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 颜色系统
|
||||
|
||||
### 主色调
|
||||
- `@primary-color`: #3498db
|
||||
- `@primary-light`: #5dade2
|
||||
- `@primary-dark`: #2980b9
|
||||
- `@primary-lighter`: #ebf3fd
|
||||
|
||||
### 功能色
|
||||
- `@success-color`: #52c41a
|
||||
- `@warning-color`: #faad14
|
||||
- `@error-color`: #f5222d
|
||||
- `@info-color`: #1890ff
|
||||
|
||||
### 中性色
|
||||
- `@white`: #ffffff
|
||||
- `@black`: #000000
|
||||
- `@gray-1` 到 `@gray-10`: 从浅到深的灰色
|
||||
|
||||
## 📱 响应式断点
|
||||
|
||||
### 断点变量
|
||||
- `@screen-xs`: 480px
|
||||
- `@screen-sm`: 576px
|
||||
- `@screen-md`: 768px
|
||||
- `@screen-lg`: 992px
|
||||
- `@screen-xl`: 1200px
|
||||
- `@screen-xxl`: 1600px
|
||||
|
||||
### 设备断点
|
||||
- `@mobile-breakpoint`: 768px
|
||||
- `@tablet-breakpoint`: 992px
|
||||
- `@desktop-breakpoint`: 1200px
|
||||
|
||||
## 🔄 动画系统
|
||||
|
||||
### 动画时长
|
||||
- `@animation-duration-base`: 0.2s
|
||||
- `@animation-duration-fast`: 0.1s
|
||||
- `@animation-duration-slow`: 0.3s
|
||||
- `@animation-duration-slower`: 0.5s
|
||||
|
||||
### 动画缓动
|
||||
- `@animation-timing-base`: ease
|
||||
- `@animation-timing-ease-in`: ease-in
|
||||
- `@animation-timing-ease-out`: ease-out
|
||||
- `@animation-timing-ease-in-out`: ease-in-out
|
||||
- `@animation-timing-linear`: linear
|
||||
|
||||
## 🛠️ 开发工具
|
||||
|
||||
### 1. **Vue CLI 配置**
|
||||
项目已配置 LESS 支持，包括：
|
||||
- LESS 编译器
|
||||
- 全局变量注入
|
||||
- 自动前缀处理
|
||||
|
||||
### 2. **构建命令**
|
||||
```bash
|
||||
# 开发模式
|
||||
yarn serve
|
||||
|
||||
# 生产构建
|
||||
yarn build
|
||||
```
|
||||
|
||||
## 📋 最佳实践
|
||||
|
||||
### 1. **变量命名**
|
||||
- 使用语义化名称
|
||||
- 遵循 BEM 命名规范
|
||||
- 保持命名一致性
|
||||
|
||||
### 2. **嵌套深度**
|
||||
- 避免超过 3 层嵌套
|
||||
- 使用 `&` 符号引用父选择器
|
||||
- 保持选择器简洁
|
||||
|
||||
### 3. **混合使用**
|
||||
- 创建可复用的混合
|
||||
- 参数化常用样式
|
||||
- 避免过度抽象
|
||||
|
||||
### 4. **文件组织**
|
||||
- 按功能模块组织文件
|
||||
- 使用 `@import` 引入依赖
|
||||
- 保持文件结构清晰
|
||||
|
||||
## 🚀 性能优化
|
||||
|
||||
### 1. **变量缓存**
|
||||
- 减少重复计算
|
||||
- 使用预定义值
|
||||
- 避免运行时计算
|
||||
|
||||
### 2. **选择器优化**
|
||||
- 避免过深嵌套
|
||||
- 使用类选择器
|
||||
- 减少选择器复杂度
|
||||
|
||||
### 3. **媒体查询优化**
|
||||
- 使用混合管理断点
|
||||
- 避免重复的媒体查询
|
||||
- 合并相似的样式规则
|
||||
|
||||
## 🔍 调试技巧
|
||||
|
||||
### 1. **浏览器开发工具**
|
||||
- 查看编译后的 CSS
|
||||
- 检查选择器优先级
|
||||
- 调试响应式样式
|
||||
|
||||
### 2. **LESS 编译错误**
|
||||
- 检查语法错误
|
||||
- 验证变量引用
|
||||
- 确认文件路径
|
||||
|
||||
### 3. **样式冲突**
|
||||
- 使用 `!important` 谨慎
|
||||
- 检查选择器特异性
|
||||
- 验证样式继承
|
||||
|
||||
## 📚 学习资源
|
||||
|
||||
### 1. **官方文档**
|
||||
- [LESS 官网](http://lesscss.org/)
|
||||
- [LESS 语言特性](http://lesscss.org/features/)
|
||||
- [LESS 函数参考](http://lesscss.org/functions/)
|
||||
|
||||
### 2. **在线工具**
|
||||
- [LESS 在线编译器](http://lesscss.org/less-preview/)
|
||||
- [LESS 语法检查器](https://github.com/less/less.js)
|
||||
|
||||
### 3. **社区资源**
|
||||
- [LESS GitHub](https://github.com/less/less.js)
|
||||
- [LESS 论坛](https://github.com/less/less.js/discussions)
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
通过使用 LESS，我们实现了：
|
||||
|
||||
1. **更好的代码组织**：嵌套结构和模块化文件
|
||||
2. **统一的样式管理**：全局变量和混合系统
|
||||
3. **高效的开发流程**：快速修改和样式复用
|
||||
4. **响应式设计**：断点管理和设备适配
|
||||
5. **维护性提升**：清晰的代码结构和语义化命名
|
||||
|
||||
LESS 为项目提供了强大的样式管理能力，让开发更加高效，维护更加简单。
|
||||
314
docs/动画效果使用指南.md
Normal file
314
docs/动画效果使用指南.md
Normal file
@@ -0,0 +1,314 @@
|
||||
# 动画效果使用指南
|
||||
|
||||
## 概述
|
||||
|
||||
本项目已集成丰富的动画效果库，包含多种CSS动画、悬停效果、滚动触发动画等，让页面更加生动有趣。
|
||||
|
||||
## 🎯 已集成的动画类型
|
||||
|
||||
### 1. 基础动画类
|
||||
|
||||
#### 淡入动画
|
||||
- `.fade-in` - 淡入
|
||||
- `.fade-in-up` - 从下方淡入
|
||||
- `.fade-in-down` - 从上方淡入
|
||||
- `.fade-in-left` - 从左侧淡入
|
||||
- `.fade-in-right` - 从右侧淡入
|
||||
|
||||
#### 滑入动画
|
||||
- `.slide-in-up` - 从下方滑入
|
||||
- `.slide-in-down` - 从上方滑入
|
||||
- `.slide-in-left` - 从左侧滑入
|
||||
- `.slide-in-right` - 从右侧滑入
|
||||
|
||||
#### 缩放动画
|
||||
- `.zoom-in` - 缩放进入
|
||||
- `.zoom-out` - 缩放退出
|
||||
|
||||
#### 特殊效果动画
|
||||
- `.bounce` - 弹跳
|
||||
- `.pulse` - 脉冲
|
||||
- `.shake` - 抖动
|
||||
- `.swing` - 摇摆
|
||||
- `.rotate-in` - 旋转进入
|
||||
- `.flip-in-x` - X轴翻转
|
||||
- `.flip-in-y` - Y轴翻转
|
||||
- `.light-speed-in` - 光速进入
|
||||
- `.rubber-band` - 橡皮筋
|
||||
- `.wobble` - 摇摆
|
||||
- `.tada` - 庆祝
|
||||
- `.heart-beat` - 心跳
|
||||
- `.hinge` - 铰链
|
||||
- `.roll-in` - 滚入
|
||||
- `.roll-out` - 滚出
|
||||
|
||||
### 2. 悬停动画效果
|
||||
|
||||
- `.hover-lift` - 悬停时上浮
|
||||
- `.hover-scale` - 悬停时缩放
|
||||
- `.hover-rotate` - 悬停时旋转
|
||||
- `.hover-glow` - 悬停时发光
|
||||
- `.hover-bounce` - 悬停时弹跳
|
||||
|
||||
### 3. 滚动触发动画
|
||||
|
||||
- `.animate-on-scroll` - 滚动时触发动画
|
||||
- `.animate-stagger` - 交错动画容器
|
||||
|
||||
### 4. 高级动画效果
|
||||
|
||||
- `.gradient-bg` - 渐变背景动画
|
||||
- `.neon-text` - 霓虹灯文字效果
|
||||
- `.wave` - 波浪效果
|
||||
- `.particles` - 粒子效果
|
||||
- `.flip-card` - 3D翻转卡片
|
||||
- `.typewriter` - 打字机效果
|
||||
|
||||
## 🚀 使用方法
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<!-- 添加动画类 -->
|
||||
<div class="animate fade-in-up">这个元素会从下方淡入</div>
|
||||
|
||||
<!-- 设置动画时长 -->
|
||||
<div class="animate fast fade-in-up">快速动画</div>
|
||||
<div class="animate slow fade-in-up">慢速动画</div>
|
||||
|
||||
<!-- 设置动画延迟 -->
|
||||
<div class="animate fade-in-up delay-1s">延迟1秒</div>
|
||||
<div class="animate fade-in-up delay-2s">延迟2秒</div>
|
||||
|
||||
<!-- 无限循环 -->
|
||||
<div class="animate infinite pulse">无限脉冲</div>
|
||||
```
|
||||
|
||||
### 悬停效果
|
||||
|
||||
```html
|
||||
<!-- 悬停时上浮 -->
|
||||
<div class="hover-lift">悬停时会上浮</div>
|
||||
|
||||
<!-- 悬停时缩放 -->
|
||||
<div class="hover-scale">悬停时会缩放</div>
|
||||
|
||||
<!-- 悬停时发光 -->
|
||||
<div class="hover-glow">悬停时会发光</div>
|
||||
```
|
||||
|
||||
### 滚动触发动画
|
||||
|
||||
```html
|
||||
<!-- 滚动时触发 -->
|
||||
<div class="animate-on-scroll">滚动到此处时显示</div>
|
||||
|
||||
<!-- 交错动画 -->
|
||||
<div class="animate-stagger">
|
||||
<div>第一个元素</div>
|
||||
<div>第二个元素</div>
|
||||
<div>第三个元素</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 组合使用
|
||||
|
||||
```html
|
||||
<!-- 组合多个动画类 -->
|
||||
<div class="animate fade-in-up delay-1s hover-lift">
|
||||
延迟淡入 + 悬停上浮
|
||||
</div>
|
||||
|
||||
<!-- 动画容器 + 悬停效果 -->
|
||||
<div class="animate-stagger">
|
||||
<div class="hover-scale">悬停缩放</div>
|
||||
<div class="hover-glow">悬停发光</div>
|
||||
<div class="hover-rotate">悬停旋转</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 🎨 自定义动画
|
||||
|
||||
### 创建新的关键帧动画
|
||||
|
||||
```css
|
||||
@keyframes customAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-animate {
|
||||
animation-name: customAnimation;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义悬停效果
|
||||
|
||||
```css
|
||||
.custom-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-hover:hover {
|
||||
transform: translateY(-20px) rotate(10deg);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
```
|
||||
|
||||
## 🔧 JavaScript 动画控制
|
||||
|
||||
### 使用动画助手
|
||||
|
||||
```javascript
|
||||
// 手动触发动画
|
||||
window.animationHelper.triggerAnimation(element, 'fade-in');
|
||||
|
||||
// 添加滚动动画
|
||||
window.animationHelper.addScrollAnimation(element, {
|
||||
threshold: 0.2,
|
||||
delay: 0.5
|
||||
});
|
||||
|
||||
// 添加交错动画
|
||||
window.animationHelper.addStaggerAnimation(container, {
|
||||
delay: 0.2,
|
||||
staggerDelay: 0.1
|
||||
});
|
||||
```
|
||||
|
||||
### 事件监听
|
||||
|
||||
```javascript
|
||||
// 监听动画开始事件
|
||||
element.addEventListener('animationStart', (event) => {
|
||||
console.log('动画开始:', event.detail);
|
||||
});
|
||||
|
||||
// 监听动画触发事件
|
||||
element.addEventListener('animationTrigger', (event) => {
|
||||
console.log('动画触发:', event.detail);
|
||||
});
|
||||
```
|
||||
|
||||
## 📱 响应式动画
|
||||
|
||||
### 移动端优化
|
||||
|
||||
```css
|
||||
/* 移动端减少动画复杂度 */
|
||||
@media (max-width: 768px) {
|
||||
.animate {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.floating-particles {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 性能优化
|
||||
|
||||
```css
|
||||
/* 使用 will-change 优化性能 */
|
||||
.animate {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
/* 使用 transform3d 启用硬件加速 */
|
||||
.animate {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
```
|
||||
|
||||
## 🎭 动画最佳实践
|
||||
|
||||
### 1. 适度使用
|
||||
- 不要过度使用动画，影响用户体验
|
||||
- 保持动画简洁明了
|
||||
- 考虑用户的动画偏好设置
|
||||
|
||||
### 2. 性能考虑
|
||||
- 使用 `transform` 和 `opacity` 属性
|
||||
- 避免在动画中改变布局属性
|
||||
- 合理使用 `will-change` 属性
|
||||
|
||||
### 3. 可访问性
|
||||
- 尊重用户的 `prefers-reduced-motion` 设置
|
||||
- 提供动画开关选项
|
||||
- 确保动画不影响内容可读性
|
||||
|
||||
### 4. 时机控制
|
||||
- 页面加载完成后延迟启动动画
|
||||
- 滚动触发动画使用 Intersection Observer
|
||||
- 合理设置动画延迟和持续时间
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
### Q: 动画不工作？
|
||||
A: 检查是否正确引入了 `animations.css` 文件，确保元素有正确的类名。
|
||||
|
||||
### Q: 动画性能差？
|
||||
A: 使用 `transform` 和 `opacity` 属性，避免改变布局属性，启用硬件加速。
|
||||
|
||||
### Q: 移动端动画卡顿？
|
||||
A: 减少动画复杂度，使用更简单的动画效果，考虑禁用某些复杂动画。
|
||||
|
||||
### Q: 如何禁用动画？
|
||||
A: 在CSS中添加 `animation: none !important;` 或使用 `prefers-reduced-motion` 媒体查询。
|
||||
|
||||
## 📚 示例代码
|
||||
|
||||
### 完整的动画页面示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="animated-page">
|
||||
<!-- 滚动进度条 -->
|
||||
<div class="scroll-progress-bar" data-scroll-progress="bar"></div>
|
||||
|
||||
<!-- 横幅区域 -->
|
||||
<div class="banner animate-on-scroll">
|
||||
<h1 class="animate fade-in-down text-glow">欢迎访问</h1>
|
||||
<p class="animate fade-in-up delay-1s">精彩内容即将呈现</p>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="content animate-stagger">
|
||||
<div class="card hover-lift">
|
||||
<div class="icon animate pulse infinite">🚀</div>
|
||||
<h3>快速开始</h3>
|
||||
<p>简单易用的开发体验</p>
|
||||
</div>
|
||||
|
||||
<div class="card hover-scale">
|
||||
<div class="icon animate bounce delay-1s">⚡</div>
|
||||
<h3>高性能</h3>
|
||||
<p>优化的性能表现</p>
|
||||
</div>
|
||||
|
||||
<div class="card hover-glow">
|
||||
<div class="icon animate wobble delay-2s">🎨</div>
|
||||
<h3>美观设计</h3>
|
||||
<p>现代化的视觉体验</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
通过合理使用这些动画效果，可以让您的页面更加生动有趣，提升用户体验。记住要适度使用，注重性能优化，并考虑可访问性需求。
|
||||
307
docs/移动端适配指南.md
Normal file
307
docs/移动端适配指南.md
Normal file
@@ -0,0 +1,307 @@
|
||||
# 移动端适配指南
|
||||
|
||||
## 概述
|
||||
|
||||
本项目已全面适配移动端，包括响应式布局、触摸优化、性能优化等，确保在各种移动设备上都有良好的用户体验。
|
||||
|
||||
## 🎯 已实现的移动端适配
|
||||
|
||||
### 1. 响应式导航
|
||||
- **桌面端导航**：完整的主菜单和下拉菜单
|
||||
- **移动端导航**：汉堡菜单 + 全屏移动端菜单
|
||||
- **返回按钮**：移动端菜单中的返回功能，已修复显示问题
|
||||
|
||||
### 2. 响应式布局
|
||||
- **断点设置**：
|
||||
- 移动端：≤768px
|
||||
- 平板端：769px-1024px
|
||||
- 桌面端：>1024px
|
||||
- **网格系统**：自动从多列调整为单列
|
||||
- **容器适配**：边距和间距自动调整
|
||||
|
||||
### 3. 触摸设备优化
|
||||
- **触摸友好尺寸**：按钮最小高度44px
|
||||
- **触摸友好间距**：菜单项间距优化
|
||||
- **触摸反馈**：移动端禁用悬停效果
|
||||
|
||||
### 4. 性能优化
|
||||
- **移动端动画简化**：减少复杂动画
|
||||
- **图片优化**：高分辨率屏幕支持
|
||||
- **硬件加速**：启用GPU加速
|
||||
|
||||
## 📱 移动端适配详情
|
||||
|
||||
### 头部导航适配
|
||||
|
||||
#### 桌面端导航
|
||||
```html
|
||||
<div class="bottom desktop">
|
||||
<!-- 完整的主菜单 -->
|
||||
</div>
|
||||
```
|
||||
|
||||
#### 移动端导航
|
||||
```html
|
||||
<div class="bottom headerBottom mobile">
|
||||
<!-- 移动端导航栏 -->
|
||||
</div>
|
||||
|
||||
<div id="mobileMenu" class="headerMobileMenu bread">
|
||||
<!-- 移动端全屏菜单 -->
|
||||
</div>
|
||||
```
|
||||
|
||||
#### 返回按钮修复
|
||||
```css
|
||||
/* 返回按钮移动端适配 */
|
||||
.goBack {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.linkGoBack {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.linkGoBack img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
```
|
||||
|
||||
### 页面布局适配
|
||||
|
||||
#### 横幅区域
|
||||
```css
|
||||
@media (max-width: 768px) {
|
||||
.page-banner {
|
||||
padding: 60px 0 40px !important;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 2.5rem !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 1.2rem !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 网格布局
|
||||
```css
|
||||
@media (max-width: 768px) {
|
||||
.advantages-grid,
|
||||
.areas-grid,
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 20px !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 卡片组件
|
||||
```css
|
||||
@media (max-width: 768px) {
|
||||
.card,
|
||||
.advantage-card,
|
||||
.area-card {
|
||||
padding: 25px 20px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🔧 使用方法
|
||||
|
||||
### 1. 自动适配
|
||||
大部分页面会自动适配移动端，无需额外配置。
|
||||
|
||||
### 2. 手动添加移动端类
|
||||
```html
|
||||
<!-- 移动端隐藏 -->
|
||||
<div class="desktop-only">仅桌面端显示</div>
|
||||
|
||||
<!-- 移动端显示 -->
|
||||
<div class="mobile-only">仅移动端显示</div>
|
||||
|
||||
<!-- 响应式容器 -->
|
||||
<div class="container">自动适配边距</div>
|
||||
|
||||
<!-- 响应式网格 -->
|
||||
<div class="grid">自动调整列数</div>
|
||||
```
|
||||
|
||||
### 3. 自定义断点
|
||||
```css
|
||||
/* 自定义移动端断点 */
|
||||
@media (max-width: 600px) {
|
||||
.custom-element {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 📐 断点规范
|
||||
|
||||
### 标准断点
|
||||
```css
|
||||
/* 超小屏幕 */
|
||||
@media (max-width: 360px) { }
|
||||
|
||||
/* 小屏幕手机 */
|
||||
@media (max-width: 480px) { }
|
||||
|
||||
/* 移动端 */
|
||||
@media (max-width: 768px) { }
|
||||
|
||||
/* 平板端 */
|
||||
@media (min-width: 769px) and (max-width: 1024px) { }
|
||||
|
||||
/* 桌面端 */
|
||||
@media (min-width: 1025px) { }
|
||||
```
|
||||
|
||||
### 特殊断点
|
||||
```css
|
||||
/* 横屏模式 */
|
||||
@media (orientation: landscape) and (max-height: 500px) { }
|
||||
|
||||
/* 触摸设备 */
|
||||
@media (hover: none) and (pointer: coarse) { }
|
||||
|
||||
/* 高分辨率屏幕 */
|
||||
@media (-webkit-min-device-pixel-ratio: 2) { }
|
||||
|
||||
/* 深色模式 */
|
||||
@media (prefers-color-scheme: dark) { }
|
||||
|
||||
/* 减少动画偏好 */
|
||||
@media (prefers-reduced-motion: reduce) { }
|
||||
```
|
||||
|
||||
## 🎨 移动端样式规范
|
||||
|
||||
### 1. 字体大小
|
||||
- **主标题**：移动端 2.5rem，小屏幕 2rem
|
||||
- **副标题**：移动端 1.2rem，小屏幕 1rem
|
||||
- **正文**：移动端 1rem，小屏幕 0.95rem
|
||||
|
||||
### 2. 间距规范
|
||||
- **页面间距**：移动端 40px，小屏幕 30px
|
||||
- **容器边距**：移动端 15px，小屏幕 10px
|
||||
- **卡片内边距**：移动端 25px 20px，小屏幕 20px 15px
|
||||
|
||||
### 3. 触摸优化
|
||||
- **按钮最小尺寸**：44px × 44px
|
||||
- **触摸间距**：最小 8px
|
||||
- **触摸反馈**：禁用悬停效果
|
||||
|
||||
## 🚀 性能优化建议
|
||||
|
||||
### 1. 移动端优化
|
||||
```css
|
||||
/* 减少动画复杂度 */
|
||||
@media (max-width: 768px) {
|
||||
.animate {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.floating-particles {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 触摸设备优化
|
||||
```css
|
||||
/* 触摸友好的交互 */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.hover-effect {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.touch-friendly {
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 高分辨率优化
|
||||
```css
|
||||
/* 高分辨率屏幕优化 */
|
||||
@media (-webkit-min-device-pixel-ratio: 2) {
|
||||
.icon {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🐛 常见问题解决
|
||||
|
||||
### Q: 返回按钮在移动端不显示？
|
||||
A: 已修复，现在返回按钮在移动端菜单中正确显示，带有白色图标和文字。
|
||||
|
||||
### Q: 移动端菜单无法关闭？
|
||||
A: 支持多种关闭方式：
|
||||
- 点击返回按钮
|
||||
- 点击菜单项
|
||||
- 点击外部区域
|
||||
- 按ESC键
|
||||
|
||||
### Q: 移动端动画卡顿？
|
||||
A: 已优化：
|
||||
- 减少动画复杂度
|
||||
- 禁用复杂粒子效果
|
||||
- 优化触摸设备性能
|
||||
|
||||
### Q: 如何自定义移动端样式？
|
||||
A: 使用 `!important` 覆盖，或添加自定义断点：
|
||||
```css
|
||||
@media (max-width: 768px) {
|
||||
.custom-element {
|
||||
/* 自定义样式 */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 📱 测试建议
|
||||
|
||||
### 1. 设备测试
|
||||
- iPhone (各种尺寸)
|
||||
- Android (各种尺寸)
|
||||
- iPad (横竖屏)
|
||||
- 桌面端 (各种分辨率)
|
||||
|
||||
### 2. 功能测试
|
||||
- 导航菜单
|
||||
- 触摸交互
|
||||
- 滚动性能
|
||||
- 动画效果
|
||||
|
||||
### 3. 性能测试
|
||||
- 页面加载速度
|
||||
- 滚动流畅度
|
||||
- 内存使用
|
||||
- 电池消耗
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
通过全面的移动端适配，项目现在支持：
|
||||
- ✅ 响应式导航
|
||||
- ✅ 触摸友好交互
|
||||
- ✅ 性能优化
|
||||
- ✅ 多设备兼容
|
||||
- ✅ 无障碍支持
|
||||
|
||||
所有页面都已适配移动端，确保在各种设备上都有良好的用户体验！
|
||||
Reference in New Issue
Block a user