CSS 响应式布局 - PX、EM 或 %？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12450961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive Layout - PX, EM, or %?
提问by L84
I am building a responsive page layout and it works great so far, but I have a question:
我正在构建一个响应式页面布局，到目前为止效果很好，但我有一个问题：
Should I be using em, px or %?
我应该使用 em、px 还是 %？
For example, I want to have border radius applied to an element. Should I use this code:
例如，我想将边框半径应用于元素。我应该使用这个代码：
border-radius: 1.563em;
Or this:
或这个：
border-radius: 25px;
Should I be using ems for similar properties or should I stick with px?
我应该将 em 用于类似的属性还是应该坚持使用 px？
回答by Ana
Generally, don't use pxfor responsive layouts.
通常，不要px用于响应式布局。
If you use a px-based media query, then your layout may end up looking like crap when the user zooms. And unfortunately, that I know all to well because I made that mistake too.
如果您使用px基于媒体查询，那么当用户缩放时，您的布局可能最终看起来像废话。不幸的是，我知道一切，因为我也犯了那个错误。
Regarding your example with border-radius, you may discover the two look really different when the font-sizeis increased - demo. The first and the third use pxfor border-radius, while the second and the fourth use em.
关于您的示例border-radius，您可能会发现在font-size增加演示时两者看起来确实不同。第一个和第三个使用pxborder-radius，而第二个和第四个使用em.
But there will be exceptions and if something doesn't feel right on zoom (for example, a box-shadowthat looks exaggerated), try it with pxas well.
但是会有例外，如果缩放时感觉不对（例如，box-shadow看起来有些夸张），也可以尝试一下px。
Also check this article.
另请查看这篇文章。
回答by Piccolina
Just for info, if it helps, it's possible to use rem. It solves the problem of "cascading size" with em. If you set
仅供参考，如果有帮助，可以使用rem. 用em解决了“级联大小”的问题。如果你设置
body { font-size :62.5 %; } /* Trick to have 1em =10px */
li {font-size:1.4em; }
your <li>will be 14px, but if you have a list in a list, the second level <li>will be at 20px, and at third level will be 27px, etc..
With rem ( means "root em" ), all <li>are at the size you define.
你<li>将是 14px，但如果你有一个列表中的列表，第二级<li>将是 20px，第三级将是 27px，等等。使用 rem（意思是“根 em”），所有<li>的大小都和你一样定义。
More info : http://snook.ca/archives/html_and_css/font-size-with-rem
更多信息：http: //snook.ca/archives/html_and_css/font-size-with-rem
and http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem( in french )
和http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem（法语）
