一、媒体查询的痛点与Less的解决方案

在响应式开发中，媒体查询（Media Queries）是适配不同设备尺寸的核心技术，但传统CSS写法存在三大问题：

1. 代码冗余：每个断点需重复编写@media规则，导致样式文件臃肿；
2. 维护困难：断点值分散在多个文件中，修改时需全局搜索替换；
3. 复用性差：相同断点逻辑无法跨项目共享，需重复编写。

Less作为CSS预处理器，通过变量、混合（Mixin）和函数特性，可将媒体查询封装为可复用的模块。其核心优势在于：

• 集中管理断点：将断点值定义为变量，修改时只需调整一处；
• 参数化查询：通过函数参数动态生成不同断点的样式；
• 逻辑复用：混合指令可组合多个媒体查询规则，减少重复代码。

二、Less媒体查询函数的核心实现

1. 断点变量定义

首先需定义一组标准的断点变量，建议采用移动优先（Mobile First）策略：

// 断点定义（单位：px，转换为em时Less会自动处理）
@screen-xs: 480;  // 手机横屏
@screen-sm: 768;  // 平板竖屏
@screen-md: 992;  // 平板横屏/小桌面
@screen-lg: 1200; // 大桌面

优势：

• 变量名语义化，便于团队理解；
• 修改断点值时无需改动样式逻辑。

2. 基础媒体查询混合指令

通过media-query混合指令封装通用逻辑：

.media-query(@min-width, @rules) {
  @media (min-width: (@min-width / 16) + 0em) {
    @rules();
  }
}

使用示例：

.container {
  width: 100%;
  .media-query(@screen-sm, {
    width: 750px;
  });
  .media-query(@screen-md, {
    width: 970px;
  });
}

原理：

• Less自动将px转换为em（除以16），避免手动计算；
• @rules()作为回调函数，插入具体样式。

3. 高级函数：断点范围查询

实际开发中常需处理范围查询（如min-width到max-width），可封装如下函数：

.media-query-range(@min-width, @max-width, @rules) {
  @media (min-width: (@min-width / 16) + 0em) and (max-width: ((@max-width - 1) / 16) + 0em) {
    @rules();
  }
}

使用场景：

.sidebar {
  display: none;
  .media-query-range(@screen-sm, @screen-md, {
    display: block;
    width: 200px;
  });
}

注意点：

• max-width需减1px以避免断点重叠；
• 嵌套查询时需确保逻辑不冲突。

三、进阶技巧：动态断点与条件查询

1. 动态断点生成

通过函数动态生成断点，适应不同设计系统：

.generate-breakpoints(@prefix, @values...) {
  each(@values, {
    @name: extract(@key, 1);
    @value: extract(@value, 1);
    .@{prefix}-@{name} {
      .media-query(@value, {
        // 插入具体样式
      });
    }
  });
}
// 调用示例
.generate-breakpoints(responsive, 
  (xs, @screen-xs), 
  (sm, @screen-sm)
);

价值：

• 自动化生成断点类，减少手动编写；
• 适配不同项目的断点规范。

2. 条件查询函数

结合Less的when条件实现更复杂的逻辑：

.responsive-font(@size, @breakpoint: null) when (isnumber(@breakpoint)) {
  font-size: @size;
  .media-query(@breakpoint, {
    font-size: @size * 1.2;
  });
}
// 调用示例
.title {
  .responsive-font(16px, @screen-md);
}

适用场景：

• 字体、间距等需按断点缩放的属性；
• 避免重复编写相同逻辑。

四、最佳实践与注意事项

1. 断点命名规范

建议采用以下命名体系：

• xs：<576px（手机）
• sm：576px~768px（平板竖屏）
• md：768px~992px（平板横屏）
• lg：992px~1200px（小桌面）
• xl：≥1200px（大桌面）

优势：

• 与Bootstrap等框架保持一致，降低学习成本；
• 便于团队沟通。

2. 性能优化

• 避免过度嵌套：媒体查询嵌套层数建议不超过3级；
• 合并相似规则：相同属性的媒体查询应合并；
• 使用Less插件：如less-plugin-clean-css压缩输出代码。

3. 调试技巧

• Source Map：生成Source Map以便调试生成的CSS；
• 断点可视化：在浏览器开发者工具中模拟不同设备尺寸；
• 日志输出：通过Less的@debug指令输出断点值。

五、完整案例：响应式导航栏

以下是一个完整的导航栏实现，展示Less媒体查询函数的综合应用：

// 断点定义
@nav-breakpoint: @screen-md;
// 导航混合指令
.responsive-nav(@rules) {
  .media-query(0, {
    @rules(); // 默认移动端样式
  });
  .media-query(@nav-breakpoint, {
    @rules(); // 桌面端样式
  });
}
// 导航栏实现
.nav {
  .responsive-nav({
    // 移动端样式
    display: flex;
    flex-direction: column;
  }, {
    // 桌面端样式
    flex-direction: row;
    justify-content: space-between;
  });
  // 嵌套媒体查询
  &-item {
    padding: 10px;
    .media-query(@nav-breakpoint, {
      padding: 15px 20px;
    });
  }
}

输出CSS：

@media (min-width: 0em) {
  .nav {
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 62em) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
  }
  .nav-item {
    padding: 15px 20px;
  }
}
.nav-item {
  padding: 10px;
}

六、总结与展望

通过Less的变量、混合指令和函数特性，媒体查询可实现：

1. 代码复用：断点逻辑集中管理，减少重复；
2. 可维护性：修改断点值时无需改动样式逻辑；
3. 灵活性：支持动态断点生成和条件查询。

未来可结合CSS变量（Custom Properties）和PostCSS进一步优化，但Less的媒体查询函数在现有项目中仍是高效的选择。建议开发者根据项目需求，选择合适的抽象层级，平衡灵活性与可维护性。