CSS - 什么是最好的使用这种情况下(px,%,vw,wh或em)?

By simon at 2018-02-07 • 0人收藏 • 34人看过

我正在使用Ionic2开发一个应用程序,我正在一个步骤中 需要预览不同大小的应用程序。目前我在所有的使用vw 大小,字体大小,填充等等,但是当调整字体有时会变成 有点小,甚至索姆有时文本往往是不可读的;为此,我 想知道在这种情况下最好用什么(* px,%,vW, wh em )。 或者我还需要使用 @ media *并支持不同的字体大小? 有什么想法吗?

4 个回复 | 最后更新于 2018-02-07
2018-02-07   #1

请注意,我只提到了你问的问题。 在这里您可以看到CSS度量单位的完整列表:[CSS单位in W3Schools](http://www.w3schools.com/cssref/css_units.asp) 而不是告诉你哪一个是“正确的”,我宁愿要您 了解每一个实际是什么。 像素(px):绝对像素。所以例如,20px会 be l在任何屏幕上字面上20个像素。如果一台显示器是1980x1200,那么你 将元素的高度设置为200px,元素wi会拿出200个像素 那个。 百分比(%):相对于父项值。 所以对于这个例子:

<div style="width: 200px;">
    <div style="width: 50%;"></div>
</div>
Ť他内部div将有一个100像素的宽度。 视口高度/宽度(vw/vh):相对于的大小 视图端口(基本上是浏览器窗口)。 例:
.myDiv {
    width: 100vw;
    height: 100vh;
    background-color: red;
}
将整个浏览器盖成红色。这是非常普遍的 [flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/),因为它是 自然响应。 电表(em)和根电表(rem): em 是相对于父元素的字体大小。 rem将是相对的 Ťhtml字体大小(大多数是16像素)。这是非常有用的,如果你 要保持“尺寸相对论”的概念你的项目,而不是使用 通过像Sass和Less这样的预处理器来实现变量。更简单,更多 直觉,我猜。 例:
.myDiv {
    font-size: 0.5rem;
}
字体大小将是8个像素。 现在你知道了,为了正确的目的选择正确的一个。

2018-02-07   #2

[w3schools.com](http://www.w3schools.com/cssref/css_units.asp)有一个漂亮 有关CSS单位的好摘要。 我为我自己做总是使用* em 。为什么? 首先, em 是相对于你的font-size。所以正如w3school所说, 2em会 2次在你定义的font-size中 *父容器。所以你可以为你定义一个特定的font-size html标签和使用任何你想要的,处理亲属 font-sizes为各种任务。 而且,* em 大部分都被覆盖了浏览器。 至少,您可以使用@media-queries来处理响应font-size 处理移动设备。所以你可以考虑r使用@media-queries结合 与相对font-size通过使用 em *

2018-02-07   #3

这可能会被关闭,但我喜欢使用em单位,因为他们 是非常可扩展的,尤其是在移动浏览器中被说,我确实使用媒体 与他们一起查询。我真的要看你在做什么 一个好的网站可能会组成一个几个EMS和几个PX比例,所以什么 永远你的最终目标是将决定你将使用, 如果你了解每个人的应用程序你将能够以哪一个为结束位置 你喜欢更多。 W3Schools和W3c Code都有很好的文章...

2018-02-07   #4

请注意,我只提到了你问的问题。 在这里您可以看到CSS度量单位的完整列表:[CSS单位in W3Schools](http://www.w3schools.com/cssref/css_units.asp) 而不是告诉你哪一个是“正确的”,我宁愿要您 了解每一个实际是什么。 像素(px):绝对像素。所以例如,20px会 be l在任何屏幕上字面上20个像素。如果一台显示器是1980x1200,那么你 将元素的高度设置为200px,元素wi会拿出200个像素 那个。 百分比(%):相对于父项值。 所以对于这个例子:

<div style="width: 200px;">
    <div style="width: 50%;"></div>
</div>
Ť他内部div将有一个100像素的宽度。 视口高度/宽度(vw/vh):相对于的大小 视图端口(基本上是浏览器窗口)。 例:
.myDiv {
    width: 100vw;
    height: 100vh;
    background-color: red;
}
将整个浏览器盖成红色。这是非常普遍的 [flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/),因为它是 自然响应。 电表(em)和根电表(rem): em 是相对于父元素的字体大小。 rem将是相对的 Ťhtml字体大小(大多数是16像素)。这是非常有用的,如果你 要保持“尺寸相对论”的概念你的项目,而不是使用 通过像Sass和Less这样的预处理器来实现变量。更简单,更多 直觉,我猜。 例:
.myDiv {
    font-size: 0.5rem;
}
字体大小将是8个像素。 现在你知道了,为了正确的目的选择正确的一个。

登录后方可回帖

Loading...