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

Question

我正在构建一个响应式页面布局,它到目前为止工作得很好,但我有一个问题:

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

例如,我想将边界半径应用于元素.我应该使用这个代码:

border-radius: 1.563em;

或这个:

border-radius: 25px;

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

Answer 1

通常,不要px用于响应式布局.

如果您使用px基于媒体的查询,那么当用户缩放时,您的布局可能看起来像垃圾.不幸的是,我知道一切都很好,因为我也犯了这个错误.

关于你的例子border-radius,你可能会发现当font-size增加时两个看起来真的不同- 演示.第一个和第三个px用于border-radius,而第二个和第四个用途em.

但是会有例外情况,如果某些东西在缩放上感觉不对(例如,box-shadow看起来有点夸张),也可以尝试一下px.

另请查看这篇文章.

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>都是你的大小限定.