// 响应式尺寸封装函数（基于1920设计稿）
// 使用方式: .responsive-size(font-size, 48px);
// 参数说明:
//   @property: CSS属性名 (如 font-size, height, margin-bottom)
//   @value: 设计稿中的像素值 (如 48)
//   @minRatio: 最小比例 (默认0.67, 即设计稿值的67%)
//   @maxRatio: 最大比例 (默认1, 即设计稿值)
.responsive-size(@property, @value, @minRatio: 0.67, @maxRatio: 1) {
  // 关键：用 unit() 提取数字部分，然后重新加单位
  @num: unit(@value);  // 30px → 30, 30 → 30
  
  // 直接用 Less 运算，不要套 unit()
  @min: @num * @minRatio * 1px;           // 最小尺寸（带px单位）
  @preferred: (@num / 19.2) * 1vw;       // 理想值（带vw单位）
  @max: @num * @maxRatio * 1px;           // 最大尺寸（带px单位）
  
  @{property}: clamp(@min, @preferred, @max);
}

// 字体专用封装（符合项目字体规范）
.font-rem(@value, @minRatio: 0.67, @maxRatio: 1) {
  .responsive-size(font-size, @value, @minRatio, @maxRatio);
}

// 高度专用封装
.height-rem(@value, @minRatio: 0.5, @maxRatio: 1) {
  .responsive-size(height, @value, @minRatio, @maxRatio);
  .responsive-size(line-height, @value, @minRatio, @maxRatio);
}

// 间距专用封装（同时设置margin和padding）
.space-rem(@value, @minRatio: 0.5, @maxRatio: 1) {
  .responsive-size(margin, @value, @minRatio, @maxRatio);
  .responsive-size(padding, @value, @minRatio, @maxRatio);
}

// 单独设置 margin 的封装
.margin-rem(@value, @minRatio: 0.5, @maxRatio: 1) {
  .responsive-size(margin, @value, @minRatio, @maxRatio);
}

// 单独设置 padding 的封装
.padding-rem(@value, @minRatio: 0.5, @maxRatio: 1) {
  .responsive-size(padding, @value, @minRatio, @maxRatio);
}