Interpreting length units in CSS

Measurement, which is very important in web design. There are at least 10 different units of measurement in CSS.
Each unit has its unique role, using them, can make the page, on various devices, very good work. Once you are familiar with all these units, you can more accurately set the size of the elements. In this tutorial, we'll look at the different units in CSS, using units, under what circumstances, and how to use them.

Absolute length Unit

Absolute units in the physical world are represented by a number of true measurements. These units do not depend on the screen size and resolution. As a result, absolute length units do not work well on digital devices, or in situations where resolution is unknown. This unit is more suitable for use in physical media design, such as printing.
Absolute length includes

• CM (cm)

• MM (mm)

• In (Inch)

• PC (Dispatch card)

• PT (Pips)

• PX (pixels)

Please note that the draft specification for the edition also includes a 1/4 mm unit (q), which is the newest unit and does not yet have a browser representation to support it. You might notice that when you use absolute length, the values for a particular unit are the same on different screens. This is because there are differences in dpi (dots per inch) on different screens. The high-resolution screen has a higher dpi, which makes the image or text look smaller.
Absolute units are most widely used in pixels (px). A pixel is usually understood as a point on the screen, but the reality is much more complicated than this. It is the smallest unit of measurement, usually as a benchmark for other units.
Other units, like inches, millimeters, centimeters, represent physical dimensions.
Point (PT), which represents 1/72 inch
Picas (PC), ball 1/6 inch.
In the following section of CSS, 6 different absolute length units are used:

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

is a running condition

Relative length Units

So the name thinks, there is no fixed value. Their values are relative to other predetermined values or characteristics. Relative units can provide the appropriate values for the elements, such as width,height,font-size, according to some other basic parameters.
These units are recommended for use in two scenarios.

1. When you create a responsive page

2. Available when used on digital media

Their corresponding values depend on the font you set or the width or height of the screen window view.
Relative units include:

• Ex (height of x)

• CH (character)

• EM (named for printing em, but different)

• REM (Root font)

Here's a look at their details.

X-height (ex) and character (CH) units

Unit ex, rarely used for development. 1exequals the size of the lowercase letter ' x ' used in the font. In English, in most cases 1ex is almost equal to 0.5em. But when you change the font, the following setting the height of the font can be equal to EM:

p {  font-size: 2ex;}

The unit CH, is defined according to the ' O ' character. 1chis defined by measuring the character ' o ' in the font

p {  margin: 2ch;}

Em

Unit em, which equals the parent element font size or base font size. If your parent element has a font size of 20px, then in all child elements, 1em=20px (translator Note: The element itself cannot set the font size). The child element font size can be adjusted according to the base font size, and the value can be decimal.
Using EM can guarantee the font size of various elements at a fixed scale. For example, the width of the child element is set to the parent element font-size:50px 2em , which is equivalent to the width of the set child element 100px . Similarly, setting a child element is equivalent to setting font-size:0.5em it font-size:25px . (Note: When a child element defines both Font-size and other properties that use EM, the EM is calculated based on the font-size of the child element itself).

Here is the demo:

body { text-align: center;}.parent { font-size: 20px;}.child { font-size: 1.5em;}.p { font-size: 14px; padding-top: 130px;}

Icon


Sometimes when you use EM in a nested set, some errors occur. This is because the EM value is dependent on its nearest ancestor element, and multi-layered nesting is more cumbersome to calculate. Especially when you want to rely on a root element or an ancestor element to calculate a value.
The following is an example of EM, which is used when nesting. We assume that the underlying font size in the document is 16 pixels (the default font size for the browser)

body { text-align: center; font-size: 16px; padding: 0 20px;}p, div { max-width: 800px; margin: auto; padding-bottom: 15px;}div { font-size: 1.15em;}span { font-size: 2em;}.p { font-size: 14px; padding-top: 130px;}

Icon:


Note that nested elements in HTML are calculated independently of the font-size size.
As can be seen from the above CSS, the font-size:1.15em of all Div, because of nesting, they each corresponding real font-size is different.

Rem

In the above nested elements, the EM value is troubled.
Unit REM, just can be solved. The value of REM is always equal to the root element of the Font-size (HTML document is the root element of HTML). Here is an example of REM.

body { text-align: center;}div { font-size: 1.15rem;}span { font-size: 2rem;}.p { font-size: 14px; padding-top: 130px;}

Icon

Note: Nesting is still present, but it does not affect the calculation of font-size.

Viewport relative length units

The viewport relative length is determined by the view window or viewport width and height.
A view window or viewport is a frame space area that is visible on the screen or on the screen.
Viewport-relative units include:

• VW: Viewport widths (viewport width)

• VH: Viewport height (viewport height)

• Vmin: Width or height of viewport, select the small one

• Vmax: Viewport width or height, select the big One

VH and VW

VH depends primarily on the height of the viewport, 1VH equals 1% of the viewport height, which is mainly used when the element is scaled according to the viewport height. For example: If the viewport height is 400px,1vh=400/100=4px, if the viewport is 800px,1vh=8px high

VW and VH are the same, but it depends on the viewport width.

Vmin and Vmax

Vmin and Vmax are approximately two units, depending on the width and height of the viewport. Vmin Select the smaller one, and the Vmax chooses the big one. The values for 1vmin,1vmax are computed and VW,VH the same.

Browser support Scenarios

Em,ex,px,cm,mm,in,pt,pc
All browsers are supported, including the old IE
Ch
Firefox, Chrome 27+, IE + +, Safari 7+, and Opera 20+.
Rem
All now browsers, and ie9+. If you need to be compatible with less than IE9, you can use Rem-unit-polyfill
Vw,wh,vmin
Chrome 20+, IE + +, Firefox 19+, Safari 6+, Opera 20+. The vmin supported in IE are not standard syntax. You can use the Vminpoly or Use-prefix-free plugin.
Vmax
Chrome 20+, Firefox 19+, and Opera 20+, and Safari 6.1+. IE is incompatible and can be compatible with Viewport-units-buggyfill.

Summarize

This tutorial provides a brief description of the length units available in CSS, including some newly added units (available for response layouts and multi-device adaptation). Have you ever used REM or viewport units in your project? Do you have any opinion of your own? You can ask your thoughts and questions in the comments below.
Original: A look at Length Units in CSS
Gajendar Singh
Original link: https://www.sitepoint.com/look-at-length-units-in-css/

Interpreting length units in CSS