大屏缩放布局

中间值就是 具体值 根据窗口分辨率最大的宽计算的来的。

中间值 = 66 / 1920 * 100vw

左右两边分别是最小值，和最大值。

height: clamp(16px, (66 / 1920) * 100vw, 66px);

 

 

封装了基于less写法的函数。直接 调用即可 .box { .height-rem(30) } 。

// 响应式尺寸封装函数（基于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);
}

 

//   width: calc(724 / (1315 + 724) * 100%);