less变量结合media query如何实现不同设备上的样式变化？

在前端响应式开发中，less的变量特性可以让media query的断点配置和样式值统一管理，避免重复编写相同的断点值和样式参数，大幅提升代码的维护效率。通过提前定义设备断点变量和样式变量，在media query中直接调用这些变量，就能快速实现不同设备上的样式变化。

less变量与media query基础

less变量定义方式

less变量以@符号开头，可存储颜色、尺寸、断点值等各类样式相关参数，定义后可以在全局样式中重复调用。例如定义设备断点变量：

// 定义响应式断点变量
@mobile-max: 767px; // 手机端最大宽度
@tablet-min: 768px; // 平板端最小宽度
@tablet-max: 1023px; // 平板端最大宽度
@desktop-min: 1024px; // 桌面端最小宽度

// 定义通用样式变量
@base-font-size: 14px;
@primary-color: #1890ff;

media query基础语法

media query即媒体查询，是CSS3提供的响应式能力，通过判断设备屏幕宽度、分辨率等特征，应用不同的样式规则。基础语法如下：

@media screen and (max-width: 767px) {
  /* 屏幕宽度小于等于767px时生效的样式 */
  body {
    font-size: 12px;
  }
}

less变量结合media query的实现方式

断点变量直接调用

将媒体查询的断点值定义为less变量，在media query的条件中直接调用，避免硬编码断点值，后续修改断点只需要调整变量即可。示例如下：

// 调用断点变量编写媒体查询
body {
  font-size: @base-font-size;
}

// 手机端样式
@media screen and (max-width: @mobile-max) {
  body {
    font-size: 12px;
  }
  .container {
    padding: 10px;
  }
}

// 平板端样式
@media screen and (min-width: @tablet-min) and (max-width: @tablet-max) {
  body {
    font-size: @base-font-size;
  }
  .container {
    padding: 20px;
    max-width: 750px;
  }
}

// 桌面端样式
@media screen and (min-width: @desktop-min) {
  body {
    font-size: 16px;
  }
  .container {
    padding: 30px;
    max-width: 1200px;
  }
}

样式变量动态赋值

除了断点变量，还可以在media query内部调用样式变量，或者根据不同设备重新赋值变量，实现样式值的动态切换。示例如下：

// 默认样式变量
@btn-height: 32px;
@btn-padding: 15px;

// 按钮基础样式
.btn {
  height: @btn-height;
  padding: 0 @btn-padding;
  background: @primary-color;
  color: #fff;
  border: none;
  border-radius: 4px;
}

// 手机端调整按钮样式变量
@media screen and (max-width: @mobile-max) {
  @btn-height: 40px;
  @btn-padding: 20px;
  .btn {
    height: @btn-height;
    padding: 0 @btn-padding;
    font-size: 16px;
  }
}

混合宏封装复用

可以将常用的媒体查询逻辑封装为less混合宏，传入对应的样式参数，进一步提升代码的复用性。示例如下：

// 封装响应式混合宏
.responsive(@device, @content) {
  & when (@device = mobile) {
    @media screen and (max-width: @mobile-max) {
      @content();
    }
  }
  & when (@device = tablet) {
    @media screen and (min-width: @tablet-min) and (max-width: @tablet-max) {
      @content();
    }
  }
  & when (@device = desktop) {
    @media screen and (min-width: @desktop-min) {
      @content();
    }
  }
}

// 调用混合宏编写样式
.header {
  height: 60px;
  background: #fff;
  // 手机端头部样式
  .responsive(mobile, {
    height: 50px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  });
  // 桌面端头部样式
  .responsive(desktop, {
    height: 70px;
    padding: 0 40px;
  });
}

注意事项

• less变量在media query中调用时，确保变量已经在作用域中定义，避免变量未定义的报错。
• 混合宏中的条件判断语法需要符合less的规范，注意when关键字的用法。
• 编译后的CSS代码需要检查媒体查询的断点是否符合预期，避免变量替换错误导致样式不生效。
• 如果项目中使用autoprefixer等后处理工具，不需要在less中手动添加浏览器前缀，保持代码简洁。

编译后效果验证

上述less代码编译为CSS后，媒体查询的断点会自动替换为对应的变量值，不同设备下会应用对应的样式规则。可以通过浏览器开发者工具切换设备模拟模式，查看样式是否按照预期变化，验证less变量和media query的结合效果。

lessless变量media_query响应式布局修改时间：2026-07-23 20:24:29