Question

我有一个网页，页面上的所有项目都在一个容器内，但我希望将所有内容缩小25％。我试过了：

Container.CSS

.container{
     transform: scale(0.75);
}

但是这种技术缩小了整个页面，使其偏离屏幕顶部大约2英寸，并且还使页面上的所有项目都模糊不清。

问题。有没有人知道一种快速简便的方法来做我想做的事情，还是我必须单独将CSS中的每一项都缩小25％？

感谢

Answer 1

由于您还没有上传任何代码供我们编辑，我只能说主页面容器或正文的宽度为75％，然后让内部的每个元素都有百分比宽度，所以他们保持敏感。

但是当你注意到transform: scale(0.75);解决方案时，我得出结论你还希望缩小字体，边框等。您最好的解决方案是将px值转换为em值（一般来说16px = 1em），然后将正文的字体大小更改为75％，缩小页面中的所有内容，因为1em随后变为12px。

可能需要一些时间，但是当你完成后，你的整个页面都变得充满活力

希望这有帮助

Answer 2

如果响应式设计如此简单，所有非移动设备友好站点都可以在1分钟内修复。但这并不是我害怕的方式。

单个项目需要具有百分比宽度。使用max-width和百分比宽度也很好。例如，您可以将主容器设置为75％，并将最大宽度设置为图形可以承受的最大值。如果你的物品里面有％宽度，那么25％的物品总是占容器尺寸的25％。