Html CSS - 在这种情况下最好使用什么（px、%、vw、wh 或 em）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36876770/
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
CSS - What is best to use for this case (px, %, vw, wh or em)?
提问by Hamza L.
I am using Ionic2 for the development of an app, I am in a step in which I need to preview the app in different sizes. Currently I am using vw in all the sizes, font-size, padding, etc... but when resizing the font sometimes become a bit small and even sometimes the text tend to be not readable; for that, I would like to know what is the best to use in this case either (px, %, vw, whor em).
我正在使用 Ionic2 开发一个应用程序，我正处于需要预览不同大小的应用程序的步骤中。目前我在所有大小、字体大小、填充等中使用 vw ......但是当调整字体大小时，有时会变得有点小，甚至有时文本往往不可读；为此，我想知道在这种情况下最好使用什么（px, %, vw, wh或em）。
Or I need to use also the @mediaand support different font sizes?
或者我还需要使用@media并支持不同的字体大小？
Any thoughts?
有什么想法吗？
回答by Ariel Weinberger
Note that I only mentioned the ones you asked about.
请注意，我只提到了您询问的那些。
Here you can see the full list of CSS measurement units: CSS Units in W3Schools
在这里您可以看到 CSS 度量单位的完整列表：W3Schools 中的 CSS 单位
Rather than telling you which one is the "right one", I would rather want you to understand what each one actually is.
与其告诉您哪一个是“正确的”，我更希望您了解每一个实际上是什么。
Pixels (px):Absolute pixels. So for example, 20pxwill be literally 20 pixels on any screen. If a monitor is of 1980x1200, and you set an element's height to 200px, the element will take 200 pixels out of that.
像素 ( px)：绝对像素。例如，20px在任何屏幕上都是 20 像素。如果显示器为 1980x1200，并且您将元素的高度设置为200px，则该元素将占用 200 像素。
Percentage (%):Relative to the parent value.
百分比 ( %)：相对于父值。
So for this example:
所以对于这个例子：
<div style="width: 200px;">
<div style="width: 50%;"></div>
</div>
The inner div will have a width of 100 pixels.
内部 div 的宽度为 100 像素。
Viewport height/width (vw/vh):Size relative to the viewport (browser window, basically).
视口高度/宽度 ( vw/ vh)：相对于视口的大小（基本上是浏览器窗口）。
Example:
例子：
.myDiv {
width: 100vw;
height: 100vh;
background-color: red;
}
Will make an cover the whole browser in red. This is very common among flexboxesas it's naturally responsive.
将整个浏览器覆盖为红色。这在flexbox 中很常见，因为它是自然响应的。
Emeters (em) and Root Emeters (rem):emis relative to the parent element's font size. remwill be relative to the htmlfont-size (mostly 16 pixels). This is very useful if you want to keep an "in mind relativity of sizes" over your project, and not using variables by pre-processors like Sass and Less. Just easier and more intuitive, I guess.
Emeters ( em) 和 Root Emeters ( rem)：em相对于父元素的字体大小。rem将相对于html字体大小（主要是 16 像素）。如果您想在您的项目中保持“记住大小的相对性”，并且不使用 Sass 和 Less 等预处理器的变量，这将非常有用。我猜只是更容易和更直观。
Example:
例子：
.myDiv {
font-size: 0.5rem;
}
Font size will be 8 pixels.
字体大小将为 8 像素。
Now that you know, choose the right one for the right purpose.
现在您知道了，请为正确的目的选择正确的。
回答by Aer0
w3schools.comhas a pretty nice summary about css units.
w3schools.com有一个关于 css 单位的很好的总结。
I for myself do always use em. Why?
我自己总是使用em。为什么？
First of all, emis relative to your font-size. So as w3school says, 2emwould be 2 timesof the font-sizeyou've defined in your parent container. So you may define a specific font-sizefor your htmltag and use whatever em you want, to handle relative font-sizesfor various tasks.
首先，em是相对于你的font-size. 因此，作为w3school说，2em将是2倍的font-size你已经在你的定义父容器。所以你可以font-size为你的html标签定义一个特定的，并使用你想要的任何 em，来处理font-sizes各种任务的相关内容。
Also, emis covered in mostly all browsers.
此外，大多数浏览器都涵盖了em。
At least, you may use @media-queriesto handle responsive font-sizehandling for mobile devices. So you may consider using @media-queriescombined with a relative font-sizeby using em.
至少，您可以@media-queries用来处理font-size移动设备的响应式处理。因此，您可以考虑使用em@media-queries与亲戚结合font-size使用。
回答by Dion Matthew Levy
this is probably gonna get closed, but I love using the em units because they are very scale-able, esp in mobile browsers that being said, I do use media queries along with them. I really depends on what youre doing.
这可能会被关闭，但我喜欢使用 em 单位，因为它们非常可扩展，尤其是在移动浏览器中，据说，我确实将媒体查询与它们一起使用。我真的取决于你在做什么。
A good site will probably compose of a few ems and a few pxs ratio, so what ever your end goal is will should dictate which you'll use,
一个好的网站可能由几个 em 和几个像素比例组成，所以你的最终目标应该决定你将使用哪个，
if you understand each ones application youll be able to end up with which one you like more. W3Schools and W3code both have good articles on them...
如果您了解每个应用程序，您将能够最终选择您更喜欢哪个应用程序。W3Schools 和 W3code 都有关于它们的好文章......
