CSS Length units detailed

Preface

The unit of length can be divided into absolute length units and relative length units in general. CSS is the most well-known is the PX and EM, but at the same time there are PT, REM, VW, VH and other units of measurement, use them can greatly increase our development efficiency. This article attempts to collate the CSS units and their application scenarios used in front-end development.

px--pixels |

PX is a pixel abbreviation and is a pixel-based unit. In the process of web browsing, the screen text, pictures, etc. will vary with the resolution of the screen, a 100px width of the picture, at 800x600 resolution, to occupy the screen width of 1/8, but at 1024x768, only about 1/10. So if you define the font size, use PX as the unit, that once the user changes the display resolution from 800 to 1024, the user actually see the text will become "small" (natural length units), even can not see clearly, affect browsing.

pt--lbs

PT is point, a common unit in the printing industry, equal to 1/72 inches. PT is all called point, but Chinese is not called "dot", the exact term is a dedicated printing unit "lbs", size 1/72 inches, is an absolute length unit.

em--Relative Parent element

em units are the font size in which they are being used. Given the font size of a parent element on a page, you can change the size of all elements proportionally by adjusting an element. It can be scaled freely, for example to make a scalable stylesheet.

Here's an "inheritance" point to note: Using EM to set the element with the high property of a wide line, the child element inherits not the EM, but the value after its calculation , which is the same as using the percent sign. Instead of adding a unit, its child elements inherit a percentage, and the child element calculates the corresponding attribute value based on its own font size. See the following example:

 <  div  style  = "LINE-HEIGHT:1.5EM; Font-size:16px;background-color:yellow; " >   parent element content  <  div  style  = "font-size:40px;background-color:red"  >   Web front-end development  </ div  >  </ div  >   

When using EM, the outermost parent element's row height is 1.5*16px=24px, and its child elements inherit the Line-height, as follows:

It can be seen that the font "overflows" because of 40px>24px. And when you don't add units:

<style= "Line-height:1.5;font-size:16px;background-color:yellow;" > parent element Content       <  style= "font-size:40px;background-color:red">    Web front-end development      </ Div > </ Div >

The effect is as follows:

Its row height will follow its own font size to calculate, inherit only "scale".

rem--Relative root elementrem refers to the font size of the root element, which changes as the font size of the parent element changes, reducing the complexity of the font size calculation between parent and child elements. Because the default font size for the root cause is 16px, we can do the following to make it easier to calculate:

HTML {  font-size: 62.5%;      /* 10÷16 */} H1 {  line-height: 24px;   line-height: 2.4rem;}

Both ie9+ and modern browsers have been supported.

REM is ideal for web app development, and its application in Web Apps is described in the following:

The REM of web app change

Meng Yu –mobile H5 layout Daquan-rem Flexbox detailed

flexbox--Quick Layout Artifact _flexbox, CSS3, layout tutorial _w3cplus

VW and vh--relative browser windows

vhEqual to viewport height 1/100 . For example, if the browser is high 900px , the 1vh value to be evaluated is 9px . Similarly, if the display window width is 750px , the 1vw value to be evaluated is 7.5px . This unit is useful when we want to set a font that follows a viewport change, or a div that fills the entire screen.

These two units are supported by both ie10+ and modern browsers.

Vmin and Vmax

vhAnd vm is always related to the height and width of the viewport, unlike, vmin and vmax is related to the maximum or minimum value of this width and height, depending on which is larger and smaller. For example, if the browser 1100px is set to wide and 700px high, it 1vmin will be 7px , 1vmax for 11px . However, if the width is set to and the height is set to, it will be equal to and will be 800px 1080px 1vmin 8px 1vmax 10.8px .

ie10+ and modern browsers have already supported Vmin,webkit browsers that do not support Vmax before, and are now supported, all modern browsers are supported, but IE does not all support Vmax.

EX and CH

exand ch的 unit length, dependent on special characters:

• ch0the width of the character
• exxheight of lowercase characters

The font-family values of these two units change when they change, and the styles of different fonts behave differently. ie9+ and modern browsers are already supported.

Reference: 7 CSS Units might not Know about

You may not have noticed the CSS units

CSS Length units detailed