使用视口单位进行缩放的转换

Question

我想使用 transform: scale，其中我的宽度更改为 80vw，高度为自动。所以这就是我想要的 = transform: scale(80vw, auto);。不幸的是，这并不起作用。有没有其他方法可以实现这种效果。最好不要使用 JavaScript。

- Cornelis Keijnemans

Answer 1

var range = 1 / 400;
var vw = range * Math.min(window.innerWidth, window.innerHeight);

document.documentElement.style.setProperty('--vw-scale', `${vw}`);

window.addEventListener('resize', () => {
  document.documentElement.style.setProperty('--vw-scale', `${range * Math.min(window.innerWidth, window.innerHeight)}`);
});

.scale-element {
  width: 400px;
  transform: scale(var(--vw-scale));
  transform-origin: left top;
}

h1 {
  font-size: 25px;
}

<div class="scale-element">
  <h1>Test title</h1>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, et. Deserunt officiis provident quod perferendis dolore dolores enim sint veniam ea odio ratione, repudiandae distinctio, aliquid possimus commodi cupiditate voluptas!
  </p>
</div>

尽管 calc 函数没有直接使用，但它的作用很接近。 为了测试和调整屏幕大小，您应该选择全屏选项查看。

- Fatih Ertuğral

Answer 2

transform的Scale()函数不需要单位，它更像是一个比例，因此scaleX(0.5)会将div缩小一半，以此类推。

.normal{
 background: red;
 }
 .scaled{
  width:100vw;
  transform:scaleX(0.8);
  background:green;
  }

<div class="normal">
  normal
</div>
<div class="scaled">
  scaled
</div>

- sara moghanam