对于大多数专业网页设计师来说,大多数用例都被认为是px.
每个人都反对px
一些文章让我得出这个假设
> http://css-tricks.com/why-ems/
> http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
> http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
这篇文章也有一个意见专家：
Should I use px or rem value units in my CSS?
反对px / for(r)em的原因？
媒体查询
在许多文章之后,em媒体查询的一大优势是,当使用浏览器的纯文本缩放时,甚至应用这些媒体查询.
但是我认为所有现代浏览器都支持全页面缩放,这也适用于以像素定义的媒体查询(在最新的Firefox和IE中测试).
无障碍
em(或rem)似乎被推荐用于font-size(可访问性),但其他大小是什么？
增加可访问性是IMHO没有重要原因,因为现代浏览器支持全页面缩放.我不知道屏幕阅读器,但我无法想象,它们在过去几年中没有得到改进.
可维护性
通过更改基本大小可以轻松更改整个站点的大小.
如果它是每个设备的持久更改,那么在使用CSS预处理器时应该非常容易.
我能找到的唯一原因是在css-tricks.com文章中,因为您可能希望在移动设备上更改所有尺寸.你真的想要这个/大多数元素吗？
对于一些像真正大标题的情况似乎很有用,但为什么移动用户能够比桌面用户更好地阅读较小的文本？另外,参考像素中的测量补偿了不同的DPI.
现实生活中的例子
我粗略地分析了他们的源代码,可能我忽略了一些事情.
Bootstrap 3
在大多数地方使用px：字体大小,填充,边距…
网格系统至少使用百分比来表示宽度.
但是,您可以在Github上找到有关此主题的许多问题.许多人要求em / rem.
ZURB基金会5
它基于rem和em,在极少数情况下它使用px,但仅用于边框等.
cloudfour.com
em中的媒体查询和字体大小以及其他所有内容的不同单元组合：px,％,em.
css-tricks.com
字体大小,边距主要在px中,但是媒体查询在em中,一些宽度在％中.
到目前为止,我到处都读过,你应该使用相对大小并且已经这样做了.如果有合理的理由(我认为是这样,因为许多专业人士这样做)我将继续/改进这样做,但它比使用px更复杂.
如果你假设大多数人都在使用整页缩放,那么px的问题在哪里,有一个一致的单位似乎很好？
(支持那些未将浏览器/设备升级近10年(IE <= 7)的人不是我的目标.) 这是要走的路？ (请考虑不同的属性font-size,width,media queries,…)
解决方法
>使用％进行水平页面布局
> em非常适合垂直间距
>使用你喜欢的任何字体大小(我喜欢它)
>使用em进行媒体查询
CSS测量单位
我发现我对不同CSS测量单位的使用随着我正在处理的测量区域而变化：水平,垂直,排版或媒体查询.
水平测量
水平空间为页面提供结构.因此,水平测量与单位相对于页面宽度(％)的效果很好.例如,它可以为主要内容提供一些基本的喘息空间：
#main {
width: 90%;
margin: 0 auto;
}
当一个或所有水平测量与页面或其容器成比例时,更复杂的布局(例如,列)也可以很好地工作.
.column-main {
width: 61.8%; /* The golden ratio is pretty awesome. */
}
.column-secondary {
width: 38.2%;
}
这个想法有一个必然结果,即如果你很好地设置你的容器结构,you won’t have to do much horizontal sizing on the contents.你基本上让块级元素填充容器的宽度,就像他们喜欢做的那样,你们都已经完成了设置.
垂直测量
垂直空间更多地是关于内容的结构(即文档流中的元素彼此有多接近),并且我认为这些测量对于固定和相对单位(px或em)都可以正常工作.
但是,在这里使用相对单位有助于给你一个vertical rhythm,这可能非常令人愉快.它还允许您更改内容(读取：字体大小)并保持垂直间距成比例.
p,ul,ol,dl {
margin: 0 1em; /* gives you proportional spacing above and below,no matter the font size */
}
印刷测量
字体测量属于他们自己的类别,可能是因为font-size充当了em中所有其他测量的基础.我见过不同策略的倡导者,但从我看到的任何测量都可以正常工作,只要你知道你在做什么.
PX
在px中设置font-size非常可靠且易于计算.在IE6之后的时代,它也可以很好地扩展,所以如果你喜欢这个,那么就没有理由不使用px.
我在使用px时遇到的唯一问题是它没有利用CSS级联.换句话说,一旦我在px中指定了大小,如果我想进行任何大规模的更改,我必须返回并单独更改它们中的每一个.
EM
尽管有任何缺点,我认为em可以是指定font-size的一种非常好的方法.我喜欢的是它让我快速看到我的字体大小之间的关系.很多时候我并不关心字体的确切大小,因为对我来说最重要的是该大小与页面上所有其他大小的关系.
使用em的重要一点是将大小设置为尽可能接近结束标记.这意味着我避免在容器上设置字体单位：
aside { font-size: 0.8em; } /* This can mess me up */
...
aside p { font-size: 0.8em; } /* Way too small! */
h1 { font-size: 2.5em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.7em; }
...
无论如何,我喜欢我能清楚而轻松地看到那里尺寸之间的关系.
REM
根据浏览器的基本字体大小调整大小似乎是Web标准的事情,因为那样你就允许最佳基本字体大小可能不是16px的浏览器.但在实践中,它的另一种方式是有效的.从我所看到的,浏览器使用16px作为基本字体大小,因为这是每个人都期望的,并且将CSS测量的实际大小设置为在浏览器中看起来不错.
我看到的最大缺点是browser support.如果您为不支持rem的浏览器编码,您将添加两次规则：
p {
font-size: 16px;
font-size: 1rem; /* I kind of hate repeating myself here,but a good CSS preprocessor might ease that pain. */
}
字体间距
由于大多数其他字体测量属于垂直或水平测量的类别,因此在获得字体大小后,其他字体测量更容易弄清楚.例如：
h1 {
font-size: 2.5em; /* Change this,and everything below stays proportional.
(Use whatever measurement unit you prefer.) */
margin-top: 0.618em;
margin-bottom: 0.3em;
line-height: 1.2; /* The only unit-less measure in CSS */
}
媒体查询
在大多数情况下,浏览器在媒体查询中处理em和px的方式几乎没有区别.即使用户使用文本缩放来调整页面大小,这也适用.
但是,如果有人在浏览器设置中更改了默认文本大小,则表现方式会有很大不同. See my answer to a related question和我的codepen demo进行了更长时间的解释.
简而言之,虽然在大多数情况下px适用于媒体查询,但使用em肯定更安全.
其他情况
当然,上述一般性评论不适用.例如,您可能会发现只要您想要与字体大小成比例的东西,ems就会派上用场,如下所示：
h1.title {
font-size: 2em;
width: 20em; /* Resizing the font also resizes its container properly. */
background-color: #d00d1e;
}
@media (min-width: 400px) {
h1 {
font-size: 2.5em; /* Woot! Didn't have to touch the width! */
}
}
或者您可能希望限制行长度以便于阅读：
p {
max-width: 42em;
}
另外,正如其他评论中所提到的,px仍适用于边界和类似的东西.它也可以用于填充,特别是当你将它与盒子大小配对时：
.example {
width: 80%;
Box-sizing: border-Box; /* Padding is NOT added to total width. Huzzah! */
padding: 10px;
}
