Detailed explanation of CSS length units: from absolute to relative, then to viewport related

Accurate measurement is a crucial part of web design. The presence of at least ten different length units in CSS is enough to illustrate this. Each unit has its own specific purpose, allowing the web page to better adapt to various devices. Once you master these units, you can adjust the element size more accurately. This tutorial will explore the different units available in CSS and discuss under which circumstances which units are used and how to use them.

Key Points

• CSS offers a variety of units of length, each unit with its specific purpose, allowing web pages to better adapt to different devices. These units can be roughly divided into absolute length units, relative length units and viewport relative length units.
• Absolute length units (such as pixels, inches, millimeters, and centimeters) represent physical measurements and are not affected by screen size or resolution. However, they may not be suitable for digital devices or for situations where resolution is unknown.
• Relative length units (including em, rem, and viewport units) adjust their values ??based on other predefined values ??or characteristics, making them ideal for creating responsive layouts. They can be relative to the font used, or to the screen's window height and width.
• The relative length of the viewport is based on the height and width of the viewport. These units (including vh (viewport height), vw (viewport width), vmin (viewport minimum), and vmax (viewport maximum)) can be used to scale elements based on the size of the browser window.

Absolute length unit

Absolute units are numerical representations of actual physical measurements. These units have nothing to do with the screen size or its resolution. Therefore, absolute length units are not suitable for use on digital devices or when the resolution is unknown. These units are more suitable when you design for physical media such as printing.

Absolute units include:

• cm (cm)
• mm (mm)
• in(inch)
• pc (card booking)
• pt(lb)
• px (pixel)

Note that the editing draft of the specification also includes quarter millimeter (q) units, but this is a new unit that does not seem to support any browser.

You may notice that when using absolute length, the same value of the same unit will have a different display effect on different screens. This is because the DPI of the screen (dots per inch) is different. High resolution screens have higher DPI than low resolution screens, so images or text look smaller.

The most widely used pixels of all absolute units are pixels (px). Pixels are often understood as single points on the screen, although technically it is more complex than that. It is the smallest unit of measurement and is usually used as a benchmark for other units.

Other units (such as inches, millimeters, and centimeters) represent the physical size of these units. Pounds (pt) units represent 1/72 inch, and card (pc) units represent 1/6 inch. Here are some CSS codes that use six common absolute units:

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;
}

CodePen Demo

Relative length units

As the name suggests, there is no fixed value for relative units. Their values ??are relative to some other predefined values ??or properties. Relative units make it easy to adjust the element size correctly easily because we can associate their width, height, font size, etc. with some other benchmark parameters.

When creating responsive layouts, these units are usually recommended and are more suitable for digital media. Their values ??can be relative to the font you are using, or to the screen's window height and width.

Relative units include:

• ex(x height)
• ch (character)
• em (named after printing em, but not the same)
• rem(root em)

Let's take a look at these units in more detail.

x Height (ex) and Character (ch) Units

ex units are rarely used in development. 1ex is equal to the size of the lower case "x" of the font used. In most cases, the value of 1ex is almost equal to 0.5em. However, this will vary by font. This unit can be considered a vertical equivalent unit of em.

p {
  font-size: 2ex;
}

Character (ch) The unit is related to the "0" character. 1ch is the advancement measure of the "0" character in the font.

p {
  margin: 2ch;
}

em Unit

The value of the unit is equal to the font size of the base element or parent element. For example, if the parent element has a font size of 20px, the value of 1em will be calculated as 20px for all direct children. The font size of child elements can be easily increased or decreased according to base units. The number does not have to be an integer.

Using em allows us to easily keep the font sizes of various elements at a fixed scale. For example, if the parent element's font-size value is 50px, setting the font size of the 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.

The following demonstration shows a simple example of how the em unit works:

CodePen Demo

However, sometimes em units produce undesired results in the case of nested elements. This is because the em value takes a value marked directly by a parent, so each nested child element will have the same em value, but the calculated value is different because the calculated value is always relative to its direct parent. So if we need to set the value of the current element to the proportion of the parent element relative to the non-direct parent element or the non-root parent element, it makes it difficult.

The following is a demonstration showing the exception nesting effect of em units. For this example, we assume that the benchmark font size in the document is 16px (this is usually the default):

CodePen Demo

Please note the nested elements in HTML, each element's content declares the calculated font size.

The following is the CSS for this example:

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;
}

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

rem unit

This is where the rem unit comes in handy. The value of rem is always equal to the font size of the root element (html element in HTML documents). rem demos are similar to those of em units. Here is CSS:

p {
  font-size: 2ex;
}

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

CodePen Demo

Note that nesting still exists now, but does not affect the calculated font size of nested elements.

Viewport relative length unit

The relative length of the viewport is based on the height and width of the viewport. A window or viewport is an area or frame space visible on the screen.

Viewport relative units include:

• vh (viewport height)
• vw (viewport width)
• vmin (Viewport minimum value)
• vmax (viewport maximum value)

Viewport height (vh) and viewport width (vw)

vh units are highly correlated with viewport. The value of vh is equal to 1/100 of the viewport height. 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.

Just as vh is related to the height of the window, vw units are highly correlated to the viewport. Therefore, the value of 1vw can be derived similarly. This means that 1vw is equal to 1/100 of the viewport width. For example, if the width of the window is 1200px, then 1vw is 12px. Use viewport units to set the width, height, and fill CSS of the element to:

p {
  margin: 2ch;
}

CodePen Demo

Viewport minimum (vmin) and viewport maximum (vmax) units

vmin unit is associated with a viewport edge with a lower value, so it can be height or width. The value of 1vmin is equal to 1/100 of the shortest edge of length. For example, if the viewport size is 500 x 700, the value of 1vmin is equal to 5px. If the size is 1000 x 700, the value is 7px.

In contrast, vmax takes into account the maximum value of the viewport. The scale factor is still 1/100, so 1vmax equals 1/100 of the edge with higher value. Using the same example as above, if the viewport size is 500 x 700, the value of 1vmax is equal to 7px. If the size is 1000 x 700, the value is 10px. Here is the CSS using vmin and vmax to set width and height:

div {
  font-size: 1.15em;
}

span {
  font-size: 2em;
}

CodePen Demo

Browser support

em, ex, px, cm, mm, in, pt and pc All browsers support it, including older IE.

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

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

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

vmax Chrome 20, Firefox 19, and Opera 20, and Safari 6.1. IE does not support it. You can try this polyfill to get some hacky support and help with some bugs in different mobile browsers.

Conclusion

This tutorial briefly introduces the different length units available in CSS, including many units that facilitate responsive layout and cross-device measurements. Have you used rem or viewport units in any project? How is your experience? Please share any tips or any issues you encounter when using these units in the Comments section.

CSS Length Unit FAQ

What are the different types of CSS length units?

CSS length units are used to specify the size of various elements on a web page. There are two types of length units in CSS: absolute units and relative units. Absolute units are fixed and their size will not be changed based on any other properties of the page. They include pixels (px), pounds (pt), picas (pc), inches (in), centimeters (cm), and millimeters (mm). On the other hand, the relative unit is relative to another length value. They include em, ex, ch, rem, vw, vh, vmin, vmax, and percentage (%).

How to choose the right CSS length unit for my project?

The selection of CSS length units depends on the specific requirements of the project. If you need a fixed size that won't change regardless of screen size or font size, you should use absolute units. However, if you want your design to be responsive and adapt to different screen sizes or font sizes, you should use relative units.

What is the difference between "em" and "rem" units in CSS?

"em" and "rem" are relative units in CSS. The font size of the "em" unit relative to its nearest parent element. On the other hand, "rem" stands for "root em", relative to the root element (html), rather than the parent element. This means that the "rem" will always be consistent regardless of the nesting level, which makes it easier to control the overall size in CSS.

How do "vw" and "vh" units in CSS work?

The units of "vw" (viewport width) and "vh" (viewport height) in CSS are relative units, representing the percentage of viewport width and height, respectively. One unit of "vw" is equal to 1% of the viewport width, and one unit of "vh" is equal to 1% of the viewport height. These units are particularly useful for creating responsive designs that fit the viewport size.

Can I mix different CSS length units in a single project?

Yes, you can mix different CSS length units in a single project. However, it is important to understand how these units work and how they interact to ensure consistency and responsiveness of the design. For example, you can use "px" for border width, "em" for font size, and "vw" for layout width to create designs that scale well across different screen sizes.

What are the advantages of using CSS relative units?

Relative units in CSS provide some advantages, especially in responsive designs. They allow the size of elements to scale relative to each other, viewport size, or user's default font size. This makes your design more flexible and able to adapt to different screen sizes and user preferences.

How to convert between different CSS length units?

Converting between different CSS length units can be complicated because it depends on various factors such as the current font size, viewport size, and the pixel density of the screen. However, there are some online tools and calculators that can help you with these conversions.

What is the default font size in CSS?

The default font size in most browsers is 16px. This means that 1em or 1rem is equal to 16px by default. However, users can change this default font size in their browser settings, which is why relative units are generally recommended as font size.

How does pixel density affect CSS length units?

Pixel density refers to the number of pixels in a given screen physical area, usually measured in pixels per inch (PPI). Screens with higher pixel density show more details in the same physical space. In CSS, a pixel (px) is not a physical pixel on the screen, but a reference pixel, which is a physical unit of measurement that takes into account the pixel density of the screen. This means that the 1px length in the CSS may correspond to multiple physical pixels on a high-density screen.

What is the "ch" unit in CSS?

The "ch" unit in CSS is a relative unit that represents the width of the "0" (zero) character in the current font. It is useful for setting widths or margins that need to be aligned with a specific number of characters, regardless of the actual font size.

The above is the detailed content of A Look at Length Units in CSS. For more information, please follow other related articles on the PHP Chinese website!