tobacco/RESPONSIVE_README.md

响应式UI改造说明

概述

本项目已成功改造为支持PC、Pad和移动端三种尺寸的自适应UI。采用移动端优先的设计理念，确保在各种设备上都能提供良好的用户体验。

断点设计

移动端 (Mobile)

• 范围: 320px - 767px
• 特点: 单列布局，垂直导航，触摸友好的交互

平板端 (Tablet)

• 范围: 768px - 1023px
• 特点: 双列布局，适配中等屏幕尺寸

桌面端 (Desktop)

• 范围: 1024px - 1440px
• 特点: 多列布局，完整功能展示

大屏桌面端 (Large Desktop)

• 范围: 1441px+
• 特点: 大屏优化，充分利用屏幕空间

主要改造内容

1. 响应式断点系统

• 创建了 src/styles/breakpoints.scss 定义断点变量
• 创建了 src/styles/responsive-utils.scss 提供响应式工具类
• 创建了 src/styles/responsive.css 提供CSS响应式工具类

2. Header组件响应式改造

• 移动端: 汉堡菜单 + 侧边导航
• 桌面端: 水平导航栏
• 自适应: Logo和导航项大小根据屏幕尺寸调整

3. 首页响应式优化

• 轮播图: 自适应高度和字体大小
• 公司介绍: 移动端垂直布局，桌面端水平布局
• 数字统计: 移动端单列，桌面端多列
• 业务介绍: 响应式卡片布局
• 新闻轮播: 自适应高度

4. Footer组件响应式

• 移动端垂直布局
• 桌面端水平布局
• 字体大小和间距自适应

5. 通用响应式工具类

容器类

.container  /* 响应式容器 */
.row        /* 响应式行 */
.col        /* 响应式列 */

网格系统

.col-1 到 col-12          /* 基础列类 */
.col-tablet-1 到 col-tablet-12  /* 平板端列类 */
.col-desktop-1 到 col-desktop-12 /* 桌面端列类 */

显示/隐藏类

.hidden-mobile    /* 移动端隐藏 */
.hidden-tablet    /* 平板端隐藏 */
.hidden-desktop   /* 桌面端隐藏 */
.visible-mobile   /* 仅移动端显示 */
.visible-tablet   /* 仅平板端显示 */
.visible-desktop  /* 仅桌面端显示 */

文本对齐类

.text-center-mobile   /* 移动端居中 */
.text-left-tablet     /* 平板端左对齐 */
.text-right-desktop   /* 桌面端右对齐 */

间距类

.p-xs, .p-sm, .p-md, .p-lg, .p-xl  /* 内边距 */
.m-xs, .m-sm, .m-md, .m-lg, .m-xl  /* 外边距 */

字体大小类

.text-xs, .text-sm, .text-base, .text-lg, .text-xl, .text-2xl, .text-3xl

使用方法

1. 在Vue组件中使用响应式样式

<template>
  <div class="container">
    <div class="row">
      <div class="col-12 col-tablet-6 col-desktop-4">
        <!-- 内容 -->
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my-component {
  font-size: 1rem;
  
  @media screen and (min-width: 768px) {
    font-size: 1.2rem;
  }
  
  @media screen and (min-width: 1024px) {
    font-size: 1.5rem;
  }
}
</style>

2. 使用响应式工具类

<!-- 响应式容器 -->
<div class="container">
  <!-- 响应式网格 -->
  <div class="row">
    <div class="col-12 col-tablet-6 col-desktop-4">
      <img src="image.jpg" class="responsive-img" alt="响应式图片">
    </div>
  </div>
  
  <!-- 响应式显示/隐藏 -->
  <div class="hidden-mobile">桌面端内容</div>
  <div class="visible-mobile">移动端内容</div>
  
  <!-- 响应式间距 -->
  <div class="p-md mt-lg">内容</div>
</div>

技术栈

• Vue 3: 组件化开发
• SCSS: 样式预处理
• CSS Grid/Flexbox: 现代布局技术
• 媒体查询: 响应式断点
• 移动端优先: 设计理念

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• 移动端浏览器

性能优化

1. CSS优化: 使用高效的媒体查询
2. 图片优化: 响应式图片加载
3. 代码分割: 按需加载组件
4. 缓存策略: 静态资源缓存

测试建议

1. 设备测试: 在不同设备上测试
2. 浏览器测试: 主流浏览器兼容性
3. 性能测试: 页面加载速度
4. 用户体验测试: 交互流畅度

维护说明

1. 新增组件: 遵循响应式设计原则
2. 修改样式: 确保多端兼容性
3. 断点调整: 根据实际需求调整
4. 性能监控: 定期检查页面性能

注意事项

1. 始终使用移动端优先的设计理念
2. 避免使用固定宽度，优先使用相对单位
3. 图片必须使用响应式类或样式
4. 测试时注意不同设备的交互方式差异
5. 保持代码的可维护性和可扩展性