[分享]css中如何让盒子等比例缩放

CSS中有时候需要让盒子等比例缩放，这个需求可以使用transform属性实现。

div{
  width: 100px;
  height: 80px;
  background-color: #CCCCCC;
}
div:hover{
  transform: scale(1.2);
} 

上面的代码中，初始化时设置盒子的宽高为100px和80px，背景颜色为#CCCCCC。当鼠标悬停在盒子上时，使用transform属性将盒子放大1.2倍。

同时，我们可以使用vw和vh单位，让盒子宽高根据浏览器窗口大小等比例缩放。

div{
  width: 50vw;
  height: 40vh;
  background-color: #CCCCCC;
}
div:hover{
  transform: scale(1.2);
} 

上面的代码中，使用vw和vh单位让盒子宽高分别为浏览器窗口宽度和高度的50%和40%。当鼠标悬停在盒子上时，仍然使用transform属性将盒子放大1.2倍。

总之，使用transform属性可以让元素等比例缩放，而vw和vh单位可以让盒子宽高根据浏览器窗口大小等比例缩放，这两种方法可以相互搭配使用，实现不同的需求。