html - 通过不同的缩放级别排列不同大小的 div

Question

这是我正在做的一个例子:http://jsfiddle.net/wFjXD/

在特定的缩放级别(我机器上的默认级别)，顶部 2 个 div 的宽度与底部 10 个相同。

这是因为我设置了像素宽度，每个小div的宽度为20px，边框为1px。较大的 div 的宽度为 108 像素，这使得每个长的 div 与 5 个小的 div 排成一行。

问题是，如果您在浏览器中使用 ctrl + 或 ctrl - 放大或缩小，所有这些都会改变并且 div 将不再排列。

是否有一个 css 修复程序可以通过不同的缩放级别保持相同的相对大小？还是有另一种最佳实践方法来完成我想要做的事情？

Answer 1

如果您希望比例保持不变，请使用% 而不是px。那是我能想到的最好的解决你的问题的方法。尽管它必须是固定数量的子级，并且您必须适本地包装它们。

给你一个idea ...