如何缩放/缩小内容和页面，而不仅仅是页面高度

Question

我创建了一个使用 css 应用 100% 宽度的网站，但是当我缩小页面时，它只缩小高度，而不是高度和宽度

谁能知道，为什么会这样？

Answer 1

如果您有一个通常宽度为 400px 的分区。 这意味着如果缩小到 50%，div 将占用 200px。 但是，您没有固定的高度，而是使用百分比。 因此，即使大多数东西都按比例缩放（例如字体大小），该分区也占据了屏幕宽度的 100%。 高度不会相应改变，因为字体大小缩小了 50%，这意味着分区相对增长到原始宽度的两倍。 因为文本缩小了两倍，高度也变小了。

如果您有一个直径较大的玻璃杯，则不必像直径较小的玻璃杯一样将其装满即可获得相同量的水。请记住这一点。