css中相对长度单位

Measuring things is as important an aspect of web design, as any other. The fact that we have at least 10 different measurement units in CSS speaks for itself.

衡量事物与Web设计一样重要。 CSS中至少有10个不同的度量单位这一事实不言而喻。

Each unit serves its own specific purpose and makes web pages more flexible for a variety of devices. Once you become acquainted with all these units, you will be able to size your elements more precisely. In this tutorial, we will take a look at the different units that are available in CSS and I’ll discuss which units to use in which situations, and how to use them.

每个单元都有其特定的用途，并使网页对于各种设备更加灵活。 熟悉所有这些单元后，就可以更精确地调整元素的大小。 在本教程中，我们将研究CSS中可用的不同单元，并且我将讨论在哪些情况下使用哪些单元以及如何使用它们。

绝对长度单位 (Absolute length units)

Absolute units are a digital representation of actual measurements in the physical world. These units are not related to the size of the screen or its resolution. As a result, absolute length units are not as well suited for use on digital devices or when the resolution is not known. These units are more appropriate when you are designing for physical media such as print.

绝对单位是物理世界中实际测量值的数字表示。 这些单位与屏幕的大小或分辨率无关。 结果，绝对长度单位不太适合用于数字设备或分辨率未知的情况。 当您为诸如打印之类的物理介质设计时，这些单元更合适。

Absolute units include:

绝对单位包括：

• cm (centimeters)厘米(厘米)
• mm (millimeters)毫米(毫米)
• in (inches)以英寸来算)
• pc (picas)pc(picas)
• pt (points)pt(点)
• px (pixels)px(像素)

Note that the editor’s draft of the spec also includes the quarter-millimeter (q) unit, but this is new and doesn’t seem to have any browser support.

请注意，规范的编辑者草案还包括四分之一毫米(q)单位，但这是新的，似乎没有任何浏览器支持。

You might observe that while using absolute lengths there are differences between the same values of a particular unit on different screens. This is because of the difference in the DPI (dots per inch) for a screen. Higher resolution screens have a higher DPI compared to smaller resolution screens, thus making the image or text look smaller.

您可能会观察到，使用绝对长度时，不同屏幕上特定单位的相同值之间存在差异。 这是因为屏幕的DPI(每英寸点数)不同。 与较小分辨率的屏幕相比，较高分辨率的屏幕具有更高的DPI，因此使图像或文本看起来更小。

The most widely used of all absolute units is the pixel (px). A pixel is generally understood to be a single dot on the screen, although it is technically more complex than that. It is the smallest unit of measurement and usually the unit used as a benchmark for the other units.

在所有绝对单位中使用最广泛的是像素(px)。 像素通常被理解为屏幕上的单个点，尽管在技术上比它更复杂 。 它是最小的度量单位，通常是其他单位的基准。

Other units like inch, millimeter, and centimeter represent the physical size of these units. The point (pt) unit represents 1/72 of an inch and the pica (pc) represents 1/6 of an inch. Here is some CSS that makes use of the six common absolute units:

其他单位(例如英寸，毫米和厘米)表示这些单位的物理尺寸。 点(pt)单位表示1/72英寸，而pica(pc)表示1/6英寸。 这是一些使用六个常见绝对单位CSS：

p {
border-top: 0.5in solid blue;
border-bottom: 18mm solid green;
border-left: 1cm solid red;
border-right: 40px solid black;
letter-spacing: 0.4pc;
font-size: 20pt;
}

This CodePen demo shows the above code in action:

此CodePen演示显示了上面的代码：

See the Pen Demo using different absolute units in CSS by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint ) 在CSS中使用不同绝对单位的Pen Demo 。

相对长度单位 (Relative length units)

Relative units, as the name suggests, don’t have fixed values. Their values are relative to some other predefined value or feature. Relative units make it easy to properly size elements since we can relate their width, height, font-size, etc. to some other base parameter.

顾名思义， 相对单位没有固定值。 它们的值相对于其他一些预定义的值或特征。 相对单位使我们可以轻松地适当调整元素的大小，因为我们可以将元素的宽度，高度，字体大小等与其他一些基本参数相关联。

These units are usually recommended when you creating responsive layouts and are preferred for digital media. Their value can be relative to the fonts you are using, or to the height and the width of the view window of a screen.

当您创建响应式布局时，通常建议使用这些单元，它们是数字媒体的首选。 它们的值可以相对于您使用的字体，也可以相对于屏幕视图窗口的高度和宽度。

Relative units include:

相对单位包括：

• ex (x-height)ex(x高度)
• ch (character)ch(字符)

• em (named after print ems, but not the same)

  em(以print ems命名，但不相同)

• rem (root em)雷姆(root em)

Let’s take a look at each of these in more detail.

让我们更详细地看一下每个。

X高度(ex)和Character(ch)单位 (X-height (ex) and Character (ch) units)

The ex unit is rarely used in development. 1ex is equal to the size of the lowercase ‘x’ in the font being used. In most cases, the value of 1ex is nearly equal to 0.5em. However this changes from one font to another. This unit can be considered the vertical equivalent of em.

在开发中很少使用ex单位 。 1ex等于所用字体1ex字母'x'的大小。 在大多数情况下，1ex的值几乎等于0.5em。 但是，这从一种字体更改为另一种字体。 可以将这个单位视为em的垂直等效单位。

p {
font-size: 2ex;
}

The character (ch) unit is related to the ‘0’ character. 1ch is the advance measure of the character ‘0’ in a font.

字符 (ch)单位与“ 0”字符相关。 1ch是字体中字符“ 0”的提前量。

p {
margin: 2ch;
}

Em单位 (Em units)

The em unit has a value equal to the font size of the base element or the parent element. For instance, if the font size of parent element is 20px then the value of 1em will compute to 20px for all immediate child elements. The font size of a child element can be increased or decreased easily based on knowledge of the base unit. The number need not be a whole number.

em单元的值等于基本元素或父元素的字体大小。 例如，如果父元素的字体大小为20px则所有直接子元素的1em值将计算为20px 。 根据基本单位的知识， 可以轻松地增加或减少子元素的字体大小。 该数字不必是整数。

Using em makes it easy for us to keep font sizes of various elements in a fixed ratio. For example, if the value of font-size for a parent element is 50px, setting the font size of a child element to 2em will be the same as setting it to 100px. Similarly, setting it to 0.5em will make the font size of the child element 25px.

使用em可使我们轻松地将各种元素的字体大小保持固定比例。 例如，如果父元素的font-size值为50px ，则将子元素的字体大小设置为2em等同于将其设置为100px 。 同样，将其设置为0.5em将使子元素的字体大小为25px 。

The demo below shows a simple example of how em units work:

下面的演示显示了em单元如何工作的简单示例：

See the Pen Basic em unit example by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint )提供的Pen Basic em单元示例 。

Sometimes, however, em units produce undesired results in the case of nested elements. This is because the em value takes the value of the immediate parent tag, so each nested child will have the same em value, but a different computed value, because the computed value is always relative to its immediate parent. Thus it makes it difficult if we need to set the value of the current element in ratio to a parent element that is not immediate or not the root parent.

但是，有时，在嵌套元素的情况下， em单位会产生不良结果。 这是因为em值采用直接父标记的值，因此每个嵌套子代将具有相同的em值，但计算值不同，因为计算值始终相对于其直接父代。 因此，如果我们需要将当前元素的值设置为与非立即父项或非父级父项的父项元素的比率，将变得很困难。

Below is a demo to show the unusual nesting effect of the em unit. For this example, we’re assuming there’s a base font size of 16px in the document (which is often the default):

以下是演示em单元异常嵌套效果的演示。 对于此示例，我们假设文档中的基本字体大小为16px (通常是默认设置)：

See the Pen Demonstrating how em units affect nested elements by SitePoint (@SitePoint) on CodePen.

见笔，演示如何em单位影响嵌套元素由SitePoint( @SitePoint上) CodePen 。

Notice the nested elements in the HTML, each with content declaring the computed font size.

注意HTML中的嵌套元素，每个元素都包含声明计算出的字体大小的内容。

Below is the CSS for this example:

以下是此示例CSS：

div {
font-size: 1.15em;
}
span {
font-size: 2em;
}

You can see that even though the div elements are all defined at 1.15em, because they are nested, they have different actual font sizes.

您可以看到，即使div元素都定义在1.15em ，因为它们是嵌套的，所以它们具有不同的实际字体大小。

雷姆单位 (Rem units)

This is where the rem unit comes in handy. The value of a rem always stays equal to the font size of the root element (which is the html element in HTML documents). The rem demo is similar to that of the em units. Here is the CSS:

这是rem单元派上用场的地方。 rem的值始终保持等于根元素(HTML文档中的html元素)的字体大小。 rem演示与em单元的演示类似。 这是CSS：

div {
font-size: 1.15rem;
}
span {
font-size: 2rem;
}

Here is a simple demo with the same nesting as the previous demo, but this time using rems:

这是一个简单的演示，其嵌套与上一个演示相同，但​​是这次使用rems：

See the Pen Basic rem unit example by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Basic Rem单元示例 。

Notice now the nesting is still present, but does not affect the computed font size of the nested elements.

请注意，嵌套仍然存在，但不会影响嵌套元素的计算字体大小。

视口相对长度单位 (Viewport-relative length units)

Viewport-relative lengths are based on the width and height of the view window or the viewport. A view window or viewport is the visible area or the framed space on the screen.

视口的相对长度基于视口或视口的宽度和高度。 视图窗口或视口是屏幕上的可见区域或框架空间。

Viewport-relative units include:

相对于视口的单位包括：

• vh (viewport height)vh(视口高度)
• vw (viewport width)大众(视口宽度)
• vmin (viewport minimum)vmin(最小视口)
• vmax (viewport maximum)vmax(最大视口)

视口高度(vh)和视口宽度(vw) (Viewport Height (vh) and Viewport Width (vw))

The vh unit is related to the height of the viewport. The value of vh is equal to 1/100th of the height of the viewport. This unit is useful if we want to scale elements based on the height of the browser window. For example, if the height of the viewport is 400px, 1vh equals 4px. If the viewport height is 800px, 1vh equals 8px.

vh单位与视口的高度有关。 vh的值等于视口高度的1/100。 如果我们要根据浏览器窗口的高度缩放元素，则此单位很有用。 例如，如果视口的高度为400px ，则1vh等于4px 。 如果视口高度为800px ，则1vh等于8px 。

Just as vh is related to the height of the window, vw units are related to the width of the viewport. The value of 1vw can therefore be deduced similarly. This means that 1vw is equal to 1/100th of the width of the viewport. For example, if the width of the window is 1200px, 1vw will be 12px. The CSS for setting the width, height, and padding of an element in viewport units is:

正如vh与窗口的高度有关， vw单位与视口的宽度有关。 因此可以类似地推导出1vw的值。 这意味着1vw等于视口宽度的1/100。 例如，如果窗口的宽度为1200px ，则1vw将为12px 。 用于以视口单位设置元素的宽度，高度和填充CSS是：

div {
height: 80vh;
width: 95vw;
padding: 1vw;
}

View demo here

在此处查看演示

最小视口(vmin)和最大视口(vmax)单位 (Viewport minimum (vmin) and Viewport maximum (vmax) units)

The vmin unit is related to the side of the viewport with the lower value so it can be either the height or the width. The value of 1vmin is equal to 1/100th of the side with the smallest length. For example, if the dimensions of the viewport are 500 x 700 then the value of 1vmin equals 5px. If the dimensions were 1000 x 700, the value would be 7px.

vmin单位与较低值的视口侧面相关，因此它可以是高度或宽度。 1vmin的值等于长度最小边的1/100。 例如，如果视口的尺寸为500 x 700，则1vmin的值等于5px 。 如果尺寸为1000 x 700，则值为7px。

Conversely, vmax takes into consideration the maximum value of the viewport. The relation factor is again 1/100, so 1vmax is 1/100th of the edge with the higher value. Taking the same examples as above, if the dimensions of the viewport are 500 x 700 then the value of 1vmax is equal to 7px. In case the dimension was 1000 x 700, the value would be 10px. This is the CSS to set width and height in vmin and vmax:

相反， vmax考虑了视口的最大值。 关系因子还是1/100，因此1vmax是具有较高值的​​边缘的1/100。 采取与上述相同的示例，如果视口的尺寸为500 x 700，则1vmax的值等于7px。 如果尺寸为1000 x 700，则值为10px。 这是CSS在vmin和vmax设置宽度和高度：

div {
height: 80vmin;
width: 95vmax;
padding: 1vmax;
}

View demo here

在此处查看演示

浏览器支持 (Browser support)

em, ex, px, cm, mm, in, pt, and pc Supported in all browsers, including old IE.

em，ex，px，cm，mm，in，pt和pc在所有浏览器(包括旧版IE)中均受支持。

ch Firefox, Chrome 27+, IE 9+, Safari 7+, and Opera 20+.

ch Firefox，Chrome 27 +，IE 9 +，Safari 7+和Opera 20+。

rem All in-use browsers including IE9+. If you need more support, here is a polyfill.

rem所有正在使用的浏览器，包括IE9 +。 如果您需要更多支持，请点击这里 。

vw, vh, and vmin Chrome 20+, IE 9+, Firefox 19+, Safari 6+, Opera 20+. One thing worth remembering is that in Internet Explorer vmin is supported by the non-standard vm syntax. For a polyfill you can try vminpoly or use -prefix-free with a plugin.

vw，vh和vmin Chrome 20 +，IE 9 +，Firefox 19 +，Safari 6 +，Opera 20+。 值得记住的一件事是，在Internet Explorer中，非标准vm语法支持vmin 。 对于polyfill，您可以尝试vminpoly或将-prefix -free与plugin一起使用 。

vmax Chrome 20+, Firefox 19+, and Opera 20+, and Safari 6.1+. No support in IE. You can try this polyfill for some hacky support and help with some bugs in different mobile browsers.

vmax Chrome 20 +，Firefox 19 +，Opera 20+和Safari 6.1+。 IE中不支持。 您可以尝试使用此polyfill以获得一些强大的支持，并帮助解决不同移动浏览器中的一些错误。

结论 (Conclusion)

This tutorial introduced you briefly to the different measurement units available in CSS, including many of the new units that can help with responsive layouts and cross-device measurements. Have you used rem or viewport units in any projects? How was your experience? Share any tips on using these units, or any problems you’ve had, in the comments section.

本教程向您简要介绍了CSS中可用的不同测量单位，包括许多有助于响应式布局和跨设备测量的新单位。 您是否在任何项目中使用了rem或viewport单位？ 您的经历如何？ 在评论部分中分享使用这些设备的任何提示或遇到的任何问题。

翻译自: https://www.sitepoint.com/look-at-length-units-in-css/

css中相对长度单位