Less中实现响应式设计的4种高效方案（手机、平板、电脑端）

紫萌影业

下是4种纯Less实现的响应式方案，均封装成可复用方法。

方案1：基础设备混合封装

// 定义设备断点变量
@mobile-max: 767px;
@tablet-min: 768px;
@tablet-max: 1024px;
@desktop-min: 1025px;

// 设备混合
.mobile(@rules) {
  @media (max-width: @mobile-max) {
    @rules();
  }
}
.tablet(@rules) {
  @media (min-width: @tablet-min) and (max-width: @tablet-max) {
    @rules();
  }
}
.desktop(@rules) {
  @media (min-width: @desktop-min) {
    @rules();
  }
}

// 使用示例
.header {
  font-size: 16px;
  
  .mobile({
    font-size: 14px;
    padding: 8px;
  });
  
  .tablet({
    font-size: 15px;
    padding: 12px;
  });
  
  .desktop({
    font-size: 18px;
    padding: 20px;
  });
}

方案2：参数化设备查询

// 参数化混合
.device(@type, @rules) {
  & when (@type = mobile) {
    @media (max-width: 767px) { @rules(); }
  }
  & when (@type = tablet) {
    @media (min-width: 768px) and (max-width: 1024px) { @rules(); }
  }
  & when (@type = desktop) {
    @media (min-width: 1025px) { @rules(); }
  }
}

// 使用示例
.navbar {
  height: 40px;
  
  .device(mobile, {
    height: auto;
    flex-direction: column;
  });
  
  .device(tablet, {
    height: 50px;
    padding: 0 15px;
  });
}

方案3：可配置断点混合

// 通用响应式混合
.responsive(@min, @max, @rules) {
  & when not (@min = 0) and not (@max = 0) {
    @media (min-width: @min) and (max-width: @max) { @rules(); }
  }
  & when (@min = 0) {
    @media (max-width: @max) { @rules(); }
  }
  & when (@max = 0) {
    @media (min-width: @min) { @rules(); }
  }
}

// 使用示例
.card {
  width: 100%;
  
  // 手机
  .responsive(0, 767px, {
    margin: 5px;
  });
  
  // 平板
  .responsive(768px, 1024px, {
    width: 48%;
    margin: 8px;
  });
  
  // PC
  .responsive(1025px, 0, {
    width: 23%;
    margin: 10px;
  });
}

方案4：设备方向增强版

// 带设备方向检测
.orientation(@device, @dir, @rules) {
  & when (@device = mobile) and (@dir = portrait) {
    @media (max-width: 767px) and (orientation: portrait) { @rules(); }
  }
  & when (@device = mobile) and (@dir = landscape) {
    @media (max-width: 767px) and (orientation: landscape) { @rules(); }
  }
  & when (@device = tablet) {
    @media (min-width: 768px) and (max-width: 1024px) { @rules(); }
  }
}

// 使用示例
.gallery {
  grid-template-columns: 1fr;
  
  .orientation(mobile, landscape, {
    grid-template-columns: repeat(2, 1fr);
  });
  
  .orientation(tablet, _, {
    grid-template-columns: repeat(3, 1fr);
  });
}

方案选择建议：

1. 基础混合：适合明确的三段式断点需求
2. 参数化混合：需要动态选择设备类型时使用
3. 可配置断点：适合需要灵活调整断点的项目
4. 方向增强：需要处理横竖屏差异时使用

来源：https://www.cnblogs.com/chatGPT-Last/p/18844302