CSS/SCSS如何实现closest函数：获取最接近目标值的单位？

要实现你需要的功能，核心是先把相对单位（vh/vw等）转换成实际像素值，再计算与目标px值的差值，最终选出差值最小的候选单位。以下是具体的JavaScript实现方案：

实现思路 #

1. 解析目标值和候选值的数值与单位
2. 将候选的相对单位（vh/vw）基于当前视口尺寸转换成px
3. 计算每个候选值与目标值的绝对差值
4. 筛选出差值最小的候选单位

代码实现 #

function closest(target, ...candidates) {
  // 提取目标像素值（假设输入为带px单位的字符串，比如"58px"）
  const targetPx = parseFloat(target);
  
  // 处理每个候选单位，转换为px并计算差值
  const processedCandidates = candidates.map(item => {
    const num = parseFloat(item);
    const unit = item.replace(/[\d.]/g, '').trim();
    
    let convertedPx;
    switch(unit) {
      case 'vh':
        // 1vh = 视口高度的1%
        convertedPx = num * window.innerHeight / 100;
        break;
      case 'vw':
        // 1vw = 视口宽度的1%
        convertedPx = num * window.innerWidth / 100;
        break;
      case 'px':
        convertedPx = num;
        break;
      // 可扩展支持rem、em等其他单位
      default:
        throw new Error(`不支持的单位类型：${unit}`);
    }
    
    return {
      original: item,
      diff: Math.abs(convertedPx - targetPx)
    };
  });
  
  // 按差值从小到大排序，取第一个即为最接近的单位
  return processedCandidates.sort((a, b) => a.diff - b.diff)[0].original;
}

// 示例调用
console.log(closest('58px', '6.4vh', '2vw'));

注意事项 #

• 视口尺寸变化时，vh/vw对应的实际px值会改变，若需响应式场景，可在window.resize事件中重新调用该函数
• 若需要支持rem单位，可基于根元素字体大小计算：convertedPx = num * parseFloat(getComputedStyle(document.documentElement).fontSize)
• 函数默认目标值为px单位，若目标是其他单位，可扩展目标值的解析逻辑

内容的提问来源于stack exchange，提问作者Cippo Nessuno