Question

我正在构建一个响应式页面布局，到目前为止效果很好，但我有一个问题：

我应该使用em，px还是％？

例如，我想将边界半径应用于元素。我应该使用这段代码：

border-radius: 1.563em;

或者这个：

border-radius: 25px;

我是否应该使用ems来获得类似的属性，还是应该坚持使用px？

Answer 1

通常，请勿将px用于响应式布局。

如果您使用基于px的媒体查询，则your layout may end up looking like crap when the user zooms。不幸的是，我知道一切都很好，因为我也犯了这个错误。

关于border-radius的示例，当font-size增加时，您可能会发现两者看起来完全不同 - demo。第一个和第三个使用px表示border-radius，而第二个和第四个使用em。

但是会有例外情况，如果某些内容在缩放时感觉不正确（例如，看似夸大的box-shadow），请尝试使用px。

同时检查this article。

Answer 2

仅供参考，如果有帮助，可以使用rem。它用em解决了“级联大小”的问题。如果你设置

body { font-size :62.5 %; } /* Trick to have 1em =10px */

li {font-size:1.4em; }

您的<li>将是14px，但如果列表中有列表，则第二级<li>将为20px，第三级将为27px等。使用rem（表示“root em”），所有<li>都是您定义的大小。