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

Posted 2023-03-06

【中文标题】响应式布局 - PX、EM 还是 %？

【英文标题】：Responsive Layout - PX, EM, or %?

【发布时间】：2012-09-09 04:18:29

【问题描述】：

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

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

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

border-radius: 1.563em;

或者这个：

border-radius: 25px;

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

【参考方案1】：

一般来说，不要将px 用于响应式布局。

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

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

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

同时检查this article。

【讨论】：

如果这个答案被更新会更好，因为现在有参考像素也可以用于布局

【参考方案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> 都是您定义的大小。

更多信息：http://snook.ca/archives/html_and_css/font-size-with-rem

和http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem（法语）

【讨论】：

只是拖钓，但我想说rem，虽然我从未使用过它们，但支持回退到px、em、%等——所以我可能会试一试——但是在列表中使用em 后备怎么样？仍然需要很长的 CSS 标记......所以还不如不使用 rem 呢？