响应式布局的最佳单位

Question

我正在开始一个新的响应式应用程序，我正在考虑使用百分比（字体/宽度/高度/边距/填充）...我的应用程序会变重吗？

用于的最佳单位是什么：

• 字体
• 宽度
• 高度
• 保证金/填充

Answer 1

“最好的”更多是一种主观的东西，但这是一篇非常好的文章，以防止使用em。

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

如果完成所有转换似乎很乏味，我发现这个工具非常有用

http://pxtoem.com/

Answer 2

对于文字，我非常赞成使用em。对于宽度，使用百分比和高度使用auto或pixel。

要计算百分比，请将像素宽度除以目标宽度乘以100.例如：

您有一个1024px宽度的容器，容器内的div为400px。要以百分比形式计算400px容器的宽度，请将400/1024 * 100 = 39.0625％宽度除以。

计算ems的公式是所需的Web字体大小除以标准Web字体大小。例如：

你想要22px字体，所以：22/16 = 1.375em。

使用百分比和em不会使您的应用比调用标准像素更重。

对于填充，您使用与宽度相同的公式，但目标是您应用填充的容器宽度，而不是它的父宽度。

别忘了设置max-width：100％;在最顶层的容器元素上（或者如果你想在较小的屏幕上使用排水沟，则为一些较小的百分比）。