css - 响应式布局 - PX、EM 还是 %？

Question

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

我应该使用 em、px 还是 %？

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

border-radius: 1.563em;

或这个：

border-radius: 25px;

我应该将ems用于类似的属性还是应该坚持使用px？

score 26 · Accepted Answer

通常，不要px用于响应式布局。

如果您使用px基于媒体查询，那么当用户缩放时，您的布局可能最终看起来像垃圾。不幸的是，我很清楚，因为我也犯了那个错误。

关于您的示例border-radius，您可能会发现两者在font-size增加演示时看起来确实不同。第一个和第三个使用px边界半径，而第二个和第四个使用em.

但也会有例外，如果缩放时感觉不对劲（例如，box-shadow看起来很夸张），也可以试试px。

还要检查这篇文章。

score 8 · Accepted Answer

仅供参考，如果有帮助，可以使用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>的大小都是你定义。

2 回答 2