是否可以在 CSS 的 scale() 内部使用 clamp()？

Question

很简单的问题。只需要知道是否可以在 scale() 内部使用 clamp()？像这样：

.element {
   scale(clamp(100px, 10%, 300px));
}

这不起作用。我该怎么做？

Answer 1

这个

.element {
   scale(clamp(100px, 10%, 300px));
}

有两种方式无效。首先没有scale()你的意思是transform: scale()。第二：scale() 仅适用于 number/float（例如 0.5、1、2）。所以不，clamp() 是不可能的。

编辑：

你可以做的是使用 css 变量和媒体查询：

#box {
  --scale: 3;
  
  width: 64px;
  height: 64px;
  background-color: #aaa;
  transform: scale(var(--scale));
} 

@media (max-width: 768px) {
  #box {
    --scale: 2;
  }
}

@media (max-width: 512px) {
  #box {
    --scale: 1;
  }
}

<div id="box"></div>

编辑：

好吧，您实际上可以通过操纵 css 变量使 scale() 响应，例如--scale 通过 js 并使用为 clamp().

计算的 font-size

window.addEventListener('resize', function(event) {
    scaleBox();
}, true);

window.addEventListener('load', function(event) {
    scaleBox();
}, true);

function scaleBox() {
  const box = document.querySelector('#box');
  
  // Box font size in px.
  const boxFontSize = parseFloat(getComputedStyle(box).fontSize);
  
  // Document font size in px.
  const documentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
  
  // Calculated scale factor.
  const scaleFactor = boxFontSize / documentFontSize;
  
  // Update the scale factor variable.
  box.style.setProperty('--scale', scaleFactor);
  
  console.log(`font-size: ${boxFontSize}px;`, `--scale: ${scaleFactor};`);
}

#box {
  --scale: 1;
  
  width: 64px;
  height: 64px;
  background-color: #aaa;
  font-size: clamp(.5rem, 10vmax, 300px);
  transform: scale(var(--scale));
}

<div id="box"></div>

是否可以在 CSS 的 scale() 内部使用 clamp()？

Is it possible to use clamp() inside of scale() in CSS?

html

css

scale

clamp