[Translation] explanation of the unit of length in CSS, css Length

[Translation] explanation of the unit of length in CSS, css Length

Measurement is very important in WEB design. There are at least 10 different measurement units in CSS.
Each unit has its unique role. Using them can make pages work well on various devices. Once you are familiar with all these units, you can set the element size more accurately. In this tutorial, we will look at the difference in unit usage in CSS, under what circumstances and how to use them.

Absolute length unit

The absolute unit is a digital representation of real measurements in the physical world. These units do not depend on the screen size and resolution. The result is that the absolute length unit cannot be used well on a digital device, or the resolution is unknown. This type of unit is more suitable for physical media design, such as printing.
Absolute length includes

• Cm (cm)

• Mm (mm)

• In (INCHES)

• Pc (dispatcher)

• Pt (point)

• Px (pixels)

Note that the edited draft specification also includes 1/4mm units (q), which is the latest unit and is not supported by a browser. You may note that when the absolute length is used, the values of specific units are the same on different screens. This is because the DPI of different screens (points per inch) is different. A high-resolution screen has a higher DPI, making the image or text look smaller.
Pixels (px) in absolute units are the most widely used. A pixel is generally understood as a point on the screen, but the actual situation is much more complex than this. It is the smallest measurement unit, usually used as a benchmark for other units.
Other units, such as inches, millimeters, and centimeters, are physical sizes.
Point (pt), indicating 1/72 inch
Dispatch card (pc), ball 1/6 inch.
The following section of CSS uses six different absolute length 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;      }

Is the running status
p { font-size: 2ex;}

Unit ch, which is defined according to the 'O' character.1chIt is defined by measuring the character 'O' in the font.

p {  margin: 2ch;}

Em

The Unit is em, which is equal to the font size of the parent element or the base font size. If the font size of your parent element is 20 PX, 1em = 20px among all child elements (note: the element itself cannot set the font size ). The font size of the child element can be adjusted based on the base font size, and the value can be decimal.
The use of em can ensure the font size of various elements in a fixed proportion. For example, set the parent Elementfont-size:50pxThe width of the child element is2em, Which is equivalent to setting the child element width100px. Similarly, set the sub-element'sfont-size:0.5emTime is equivalent to settingfont-size:25px. (Note: when the child element defines both font-size and other attributes using em, em is calculated based on the font-size of the child element ).

The following is a demonstration:

<H1> em unit example 

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

Illustration
<H1> unit em: Demonstration of element nesting

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

Figure:
<H1> rem example

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

Illustration

Note: nesting still exists, but does not affect the calculation of font-size.

The unit of relative length of the view.

The relative length of a view is determined by the width and height of the View window or view.
A View window or a view is a visible area of the screen or a frame space area on the screen.
The relative unit of the view is as follows:

• Vw: viewport width)

• Vl: viewport height)

• Vmin: Specifies the width or height of the port.

• Vmax: Specifies the width or height of the port.

VL and vw

The main reason for this is that the size of the source image is 1% of the height of the source image. The size of the source image is of the size of the source image. For example, if the height of the view is 400px, 1ku = 400/100 = 4px, if the height of the view is 800px, 1ku = 8px

The vw is the same as the VL, but it depends on the width of the viewport.

Vmin and vmax

Vmin and vmax are two similar units, depending on the width and height of the view. Select the smaller one for vmin and the larger one for vmax. The value of 1 vmin and 1 Vmax is calculated as that of vw and Zh.

Browser support

Em, ex, px, cm, mm, in, pt, pc
All browsers, including the old IE
Ch
Firefox, Chrome 27 +, IE 9 +, Safari 7 +, and Opera 20 +.
Rem
All current browsers and IE9 +. To be less compatible with IE9, you can use REM-unit-polyfill.
Vw, wh, vmin
The vmin supported in Chrome 20 +, IE 9 +, Firefox 19 +, Safari 6 +, and Opera 20 +. IE is not a standard syntax. You can use the vminpoly or use-prefix-free plug-in.
Vmax
Chrome 20 +, Firefox 19 +, and Opera 20 +, and Safari 6.1 +. IE are incompatible. You can use viewport-units-buggyfill for compatibility.

Summary

This tutorial briefly introduces the available length units in CSS, including some new units (which can be used for response layout and multi-device adaptation ). Have you ever used rem or the unit of View in your project? Do you have any opinions? You can comment on your thoughts and questions below.
Original article: A Look at Length Units in CSS
Author: Gajendar Singh
Link: https://www.sitepoint.com/look-at-length-units-in-css/