响应式布局 - 使用像素、EM还是百分比？

Question

17

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

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

例如，我想在一个元素上使用边框半径。我应该使用这段代码：

border-radius: 1.563em;

或者这样：

border-radius: 25px;

我是否应该使用ems来设置相似属性，或者应该坚持使用px?

- L84

2个回答

8

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

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

li {font-size:1.4em; }

你的<li>将会是14像素，但如果你有一个嵌套列表，第二层的<li>将会是20像素，第三层将会是27像素等等。使用rem（意思是“根em”），所有的<li>都是你定义的大小。

- Piccolina

只是闲扯，但我想说 rem 虽然我从未使用过它们，但支持回退到 px、em、% 等等。所以我可能会试一试，但在列表中使用 em 回退呢？仍然需要冗长的 CSS 标记... 所以最好不要使用 rem 了？ - Baumr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ana · Accepted Answer

通常不要在响应式布局中使用 px。

如果您使用基于 px 的媒体查询，则可能会在用户缩放时导致布局显示不良 - 参考链接。不幸的是，我也犯过这个错误，深有体会。

关于您提到的 border-radius 示例，当增加 font-size 时，您可能会发现两者看起来非常不同 - 演示链接。第一和第三个使用 px 设定 border-radius，而第二和第四个使用 em。

但是也会有例外情况，如果某些元素在缩放时感觉不对劲（例如似乎太夸张的 box-shadow），也可以尝试使用 px。

另外请参考该文章。