使容器内的所有项目都变小

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随后变为12 in。

可能需要一些时间，但是当您完成之后，整个页面都变得动态了

希望这能有所帮助

Answer 2

如果响应设计如此容易，所有非移动友好网站可以在1分钟内修复.但恐怕不是这样的。

个别项目需要有百分比宽度。使用最大宽度的百分比宽度也是好的。例如，您的主容器设置为75%，最大宽度为您的图形所能容纳的最大宽度。如果你在里面的物品有%宽，那么25%的物品总是容器大小的25%。