前端布局如何应对屏幕缩小：保持宽高不变的技巧

要保持布局的宽高不变，可以使用 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 像素。

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

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