# 响应式设计指南 - 不使用媒体查询

## 概述

本指南介绍如何使用 JavaScript 检测屏幕尺寸来替代传统的 CSS 媒体查询，实现更灵活、更可控的响应式设计。

## 解决方案架构

### 1. CSS 容器查询 (Container Queries)
- **文件**: `src/assets/css/responsive_without_media.css`
- **优势**: 最新的 CSS 标准，基于容器而非视口
- **兼容性**: 现代浏览器支持

### 2. JavaScript 检测 + 类名控制
- **文件**: `src/static/responsive_helper.js`
- **优势**: 完全兼容，可编程控制
- **兼容性**: 所有浏览器支持

### 3. Vue2 组件化响应式
- **文件**: `src/components/ResponsiveLayout.vue`
- **优势**: 组件化，易于维护
- **兼容性**: Vue2 项目

## 使用方法

### 基础使用

#### 1. 引入响应式助手

```html
<!-- 在 index.html 中引入 -->
<script src="/static/responsive_helper.js"></script>
```

#### 2. 使用响应式布局组件

```vue
<template>
  <ResponsiveLayout :showDebug="true" @screenSizeChange="handleScreenChange">
    <div class="page-content">
      <!-- 你的内容 -->
    </div>
  </ResponsiveLayout>
</template>

<script>
import ResponsiveLayout from '@/components/ResponsiveLayout.vue';

export default {
  components: { ResponsiveLayout },
  methods: {
    handleScreenChange(event) {
      console.log('屏幕尺寸变化:', event.detail);
      // 根据屏幕尺寸执行不同逻辑
    }
  }
};
</script>
```

#### 3. 使用响应式 CSS 类

```html
<!-- 根据屏幕尺寸显示/隐藏 -->
<div class="responsive-hidden-xs">超小屏幕隐藏</div>
<div class="responsive-hidden-sm">小屏幕隐藏</div>
<div class="responsive-hidden-md">中等屏幕隐藏</div>
<div class="responsive-hidden-lg">大屏幕隐藏</div>
<div class="responsive-hidden-xl">超大屏幕隐藏</div>

<!-- 根据屏幕尺寸显示 -->
<div class="responsive-visible-xs">超小屏幕显示</div>
<div class="responsive-visible-sm">小屏幕显示</div>
<div class="responsive-visible-md">中等屏幕显示</div>
<div class="responsive-visible-lg">大屏幕显示</div>
<div class="responsive-visible-xl">超大屏幕显示</div>
```

### 高级使用

#### 1. 自定义断点

```vue
<template>
  <ResponsiveLayout :customBreakpoints="customBreakpoints">
    <!-- 内容 -->
  </ResponsiveLayout>
</template>

<script>
export default {
  data() {
    return {
      customBreakpoints: {
        xs: 320,    // 超小屏幕
        sm: 576,    // 小屏幕
        md: 768,    // 中等屏幕
        lg: 992,    // 大屏幕
        xl: 1200,   // 超大屏幕
        xxl: 1400   // 超超大屏幕
      }
    };
  }
};
</script>
```

#### 2. 响应式内容控制

```vue
<template>
  <div>
    <!-- 移动端内容 -->
    <div v-if="isMobile" class="mobile-content">
      <h2>移动端优化内容</h2>
      <p>触摸友好的界面设计</p>
    </div>
    
    <!-- 桌面端内容 -->
    <div v-if="isDesktop" class="desktop-content">
      <h2>桌面端完整内容</h2>
      <p>鼠标和键盘友好的界面</p>
    </div>
    
    <!-- 平板端内容 -->
    <div v-if="isTablet" class="tablet-content">
      <h2>平板端适配内容</h2>
      <p>触摸和鼠标混合操作</p>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    isMobile() {
      return this.$refs.responsiveLayout?.isMobile || false;
    },
    isTablet() {
      return this.$refs.responsiveLayout?.isTablet || false;
    },
    isDesktop() {
      return this.$refs.responsiveLayout?.isDesktop || false;
    }
  }
};
</script>
```

#### 3. 动态样式调整

```vue
<template>
  <div :class="dynamicClasses">
    <button @click="adjustLayout">调整布局</button>
  </div>
</template>

<script>
export default {
  computed: {
    dynamicClasses() {
      const classes = ['base-layout'];
      
      if (this.$refs.responsiveLayout) {
        const size = this.$refs.responsiveLayout.currentScreenSize;
        classes.push(`layout-${size}`);
        
        if (this.$refs.responsiveLayout.isMobile) {
          classes.push('mobile-optimized');
        }
      }
      
      return classes;
    }
  },
  methods: {
    adjustLayout() {
      const element = this.$el.querySelector('.content');
      if (this.$refs.responsiveLayout) {
        // 根据断点显示/隐藏元素
        this.$refs.responsiveLayout.responsiveShow(element, 'md');
      }
    }
  }
};
</script>
```

## CSS 类名系统

### 响应式断点类名

```css
/* 屏幕尺寸类名 */
.screen-xs { /* 超小屏幕样式 */ }
.screen-sm { /* 小屏幕样式 */ }
.screen-md { /* 中等屏幕样式 */ }
.screen-lg { /* 大屏幕样式 */ }
.screen-xl { /* 超大屏幕样式 */ }
.screen-xxl { /* 超超大屏幕样式 */ }

/* 容器尺寸类名 */
.container-xs { /* 超小容器样式 */ }
.container-sm { /* 小容器样式 */ }
.container-md { /* 中等容器样式 */ }
.container-lg { /* 大容器样式 */ }
.container-xl { /* 超大容器样式 */ }
.container-xxl { /* 超超大容器样式 */ }
```

### 响应式工具类

```css
/* 显示/隐藏 */
.responsive-hidden-xs { display: none !important; }
.responsive-visible-xs { display: block !important; }

/* 布局 */
.responsive-grid { display: grid !important; }
.responsive-flex { display: flex !important; }
.responsive-block { display: block !important; }

/* 间距 */
.responsive-m-0 { margin: 0 !important; }
.responsive-p-3 { padding: 1rem !important; }

/* 文本 */
.responsive-text-center { text-align: center; }
.responsive-text-primary { color: #3498db; }

/* 阴影 */
.responsive-shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.responsive-shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); }
```

## JavaScript API

### 全局方法

```javascript
// 响应式显示元素
window.responsiveShow(element, breakpoint);

// 响应式隐藏元素
window.responsiveHide(element, breakpoint);

// 响应式切换类名
window.responsiveToggleClass(element, className, breakpoint);

// 获取当前屏幕信息
const screenInfo = window.responsiveHelper.getCurrentScreenInfo();
```

### 事件监听

```javascript
// 监听屏幕尺寸变化
window.addEventListener('screenSizeChange', (event) => {
  const { size, width, height, breakpoint } = event.detail;
  
  if (size === 'xs' || size === 'sm' || size === 'md') {
    // 移动端逻辑
    console.log('切换到移动端');
  } else if (size === 'lg') {
    // 平板端逻辑
    console.log('切换到平板端');
  } else {
    // 桌面端逻辑
    console.log('切换到桌面端');
  }
});
```

### 断点检测

```javascript
// 检查是否匹配特定断点
const isMobile = window.responsiveHelper.matchesBreakpoint('md');
const isTablet = window.responsiveHelper.matchesBreakpoint('lg');
const isDesktop = !window.responsiveHelper.matchesBreakpoint('lg');
```

## 最佳实践

### 1. 性能优化

```javascript
// 使用防抖优化 resize 事件
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    // 执行响应式逻辑
  }, 100);
});
```

### 2. 渐进增强

```javascript
// 检测功能支持
if (CSS.supports('container-type', 'inline-size')) {
  // 使用容器查询
  console.log('支持容器查询');
} else {
  // 回退到 JavaScript 检测
  console.log('使用 JavaScript 检测');
}
```

### 3. 组件化设计

```vue
<!-- 创建可复用的响应式组件 -->
<template>
  <div :class="responsiveClasses">
    <slot name="mobile" v-if="isMobile"></slot>
    <slot name="tablet" v-else-if="isTablet"></slot>
    <slot name="desktop" v-else></slot>
    <slot v-if="!isMobile && !isTablet && !isDesktop"></slot>
  </div>
</template>

<script>
export default {
  name: 'ResponsiveSlot',
  inject: ['responsiveLayout'],
  computed: {
    isMobile() {
      return this.responsiveLayout?.isMobile || false;
    },
    isTablet() {
      return this.responsiveLayout?.isTablet || false;
    },
    isDesktop() {
      return this.responsiveLayout?.isDesktop || false;
    },
    responsiveClasses() {
      return {
        'responsive-slot': true,
        [`screen-${this.responsiveLayout?.currentScreenSize}`]: true
      };
    }
  }
};
</script>
```

### 4. 主题切换

```javascript
// 根据屏幕尺寸切换主题
function switchThemeByScreen() {
  const screenInfo = window.responsiveHelper.getCurrentScreenInfo();
  
  if (screenInfo.isMobile) {
    document.body.classList.add('theme-mobile');
    document.body.classList.remove('theme-desktop');
  } else {
    document.body.classList.add('theme-desktop');
    document.body.classList.remove('theme-mobile');
  }
}

// 监听屏幕变化
window.addEventListener('screenSizeChange', switchThemeByScreen);
```

## 迁移指南

### 从媒体查询迁移

#### 原来的 CSS
```css
@media (max-width: 768px) {
  .mobile-menu {
    display: block;
  }
  .desktop-menu {
    display: none;
  }
}
```

#### 新的 JavaScript 方式
```javascript
// 在组件中
mounted() {
  this.updateMenuVisibility();
  window.addEventListener('screenSizeChange', this.updateMenuVisibility);
},
methods: {
  updateMenuVisibility() {
    const mobileMenu = this.$el.querySelector('.mobile-menu');
    const desktopMenu = this.$el.querySelector('.desktop-menu');
    
    if (this.$refs.responsiveLayout.isMobile) {
      mobileMenu.style.display = 'block';
      desktopMenu.style.display = 'none';
    } else {
      mobileMenu.style.display = 'none';
      desktopMenu.style.display = 'block';
    }
  }
}
```

#### 新的 CSS 类方式
```css
/* 使用响应式类名 */
.mobile-menu {
  display: none;
}

.desktop-menu {
  display: block;
}

/* 移动端显示 */
.screen-xs .mobile-menu,
.screen-sm .mobile-menu,
.screen-md .mobile-menu {
  display: block;
}

.screen-xs .desktop-menu,
.screen-sm .desktop-menu,
.screen-md .desktop-menu {
  display: none;
}
```

## 调试和测试

### 1. 启用调试模式

```vue
<ResponsiveLayout :showDebug="true">
  <!-- 内容 -->
</ResponsiveLayout>
```

### 2. 控制台调试

```javascript
// 查看当前屏幕信息
console.log(window.responsiveHelper.getCurrentScreenInfo());

// 手动触发屏幕变化
window.dispatchEvent(new Event('resize'));
```

### 3. 测试不同屏幕尺寸

```javascript
// 模拟不同屏幕尺寸
function simulateScreenSize(width) {
  Object.defineProperty(window, 'innerWidth', {
    writable: true,
    configurable: true,
    value: width
  });
  
  window.dispatchEvent(new Event('resize'));
}

// 测试移动端
simulateScreenSize(375);

// 测试平板端
simulateScreenSize(768);

// 测试桌面端
simulateScreenSize(1200);
```

## 总结

通过使用 JavaScript 检测屏幕尺寸替代媒体查询，我们获得了：

1. **更好的控制性**: 可以编程控制响应式行为
2. **更高的灵活性**: 支持复杂的响应式逻辑
3. **更好的性能**: 避免 CSS 重排和重绘
4. **更好的维护性**: 集中管理响应式逻辑
5. **更好的兼容性**: 支持所有浏览器

这种方案特别适合需要复杂响应式逻辑的现代 Web 应用。