前端如何让屏幕缩小时布局的宽高不变

要保持布局的宽高不变，可以使用CSS的缩放属性来实现。

方法一：使用transform属性的scale()函数 在CSS中，可以使用transform属性的scale()函数来缩放元素。通过设置元素的transform-origin属性，可以指定缩放的基准点。

例如，将一个div元素的宽高保持不变，可以使用以下代码：

div {
  transform-origin: top left;
  transform: scale(0.5);
}

在上述代码中，div元素的宽高将保持原来的一半，即缩小为原来的50%。

方法二：使用@media查询和viewport单位 可以使用@media查询来检测屏幕宽度，并使用viewport单位来设置元素的宽度。

例如，将一个div元素的宽度保持不变，可以使用以下代码：

div {
  width: 100vw;
}

@media (max-width: 600px) {
  div {
    width: 600px;
  }
}

在上述代码中，div元素的宽度将始终填满屏幕的宽度，但当屏幕宽度小于600像素时，div元素的宽度将固定为600像素。

需要注意的是，这种方法只能保持宽度不变，如果需要保持高度不变，可以使用类似的方法设置元素的高度。

综上所述，以上是两种常用的方法来保持布局的宽高在屏幕缩小时不变。可以根据具体需求选择适合的方法来实现