CSS EM units

Last Update:2017-12-14 Source: Internet

Author: User

Tags vmin

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article was also published in HTTPS://GITHUB.COM/ZHANGYACHEN/ZHANGYACHEN.GITHUB.IO/ISSUES/41

Why do you have em?

for flexible layout. More accurately, the interface elements are scaled to the size of the browser font.
Users can adjust the browser font size according to their needs, for example, some people have poor eyesight, may need to change the browser's default font size.

At this point, we want the width of the page element, margin, padding and other dimension elements will be scaled according to the font size, we need to use EM units instead of PX units, because the PX units are fixed, once the value of the element will not change the size.

Conversion of EM and px

EM units are relative to the font size of the elements _ using EM units. That is, 1em is always equal to the font size currently used with EM elements.
If the element that is currently using EM does not have a font size set, for example:

<body>    <div id="father">    ......    </div></body>

body{    font-size:20px;}#father{    width:20em;    border:1pxsolidred;}

According to the 1em is always equal to the current use of the EM element font size, the current element font size is inherited from the body 20px, so 1em=20px. Then calculate the width equal to 20*20=400px.

But if the element that is currently using EM is set to the font size, or the above example, only the Font-size setting is added:

body{    font-size:20px;}#father{        font-size:2em;    width:20em;    border:1pxsolidred;}

The font-size of the current element is equal to 2EM, in which case the font-size= parent element of the element itself is multiplied by the EM value of font-size.
That is 20*2=40px.

Again according to 1em is always equal to the current use of the EM element font size, the current element font size is 40px, so 1em=40px. Then calculate the width equal to 20*40=800px.

In summary: First find the Font-size value that calculates the current element. If the font-size of the current element also uses EM units, then the font-size= parent element of the current element has an EM value of font-size*font-size.

Application Scenarios for EM

The EM can be set on margin, padding, width, height equivalent.
We look at this page of CSS source code, search em:

REM units

is also a font unit, similar to EM, but the size of REM conversion to pixels depends on the font size of the page root element, which is the font size of the HTML element.

Why use REM units

When using EM, we need to know the font size using EM elements. If it is not set up, we need to find the font size of the parent element or even the font size of the grandfather element in terms of inheritance, which is cumbersome. But REM units only need to know the font size of the HTML element, and the font size of the HTML element corresponds to the unique benchmark.

Conversion of REM and px

The root element font size multiplied by your REM value is the PX value.

<body>    <div id="father">    ......    </div></body>

html{    font-size:20px;}#father{    font-size:1.5rem;        width:20em;    border:1pxsolidred;}

At this point the font-size of the #father element is 20_1.5=30px. Width is 20_20=400px.
Must be based on the font size of the HTML, not the body font size.

Testing this code also found that Google's browser minimum font is 12px, even if the font is set to 10px will be forced to set to 12px. O (╯-╰) o

CSS other font units

VH and VW
VW = view Width
VH = view Height
VH equals 1/100 of the viewport height. For example, if the browser's height is 900PX,1VH, the value of 9PX is evaluated.
VW in the same vein.

Note that the viewport here refers to the size of the viewable area inside the browser, not the taskbar title bar and the browser area size of the bottom toolbar.

If you want to make an area full of height:

.slide{    height:100vh;}

Vmin and Vmax
Vmin and Vmax are related to the maximum or minimum value of width and height, depending on which is larger and smaller. For example, if the browser is set to 1100px wide and 700px high, 1vmin will be 7px,1vmax 11px. However, if the width is set to 800px, the height setting of 1080px,1vmin will be equal to 8px and 1vmax will be 10.8px.

So when can you use these values?

Imagine that you need an element that is always visible on the screen. This effect can be achieved by setting the Vmin value below 100 with the height and width. For example, a square element always touches at least two edges of the screen that might be defined like this:

.box{    height:100vmin;    width:100vmin;}

If you need a square that always covers the visible window (all the way to the four edges of the screen), use the same rules to replace the unit with Vmax.

.box{    height:100vmax;    width:100vmax;}

EX and CH
The EX and CH units are based on the font's unit of measure, depending on the font being set.
CH: The width of the number "0" for a given font
Ex: The x-height of the current font or half of an em. The x-height of the given font refers to the height of the lowercase x of that font. Usually, this is the middle sign of the font. Different font ex values may be different because the height of x in different fonts may be different. However, many user agents do this by taking the value of EM and then using half as the value of ex, since most fonts do not have a built-in height value for ex, and it is quite difficult to calculate this value. Since the lowercase letters of most fonts are half the height of the corresponding capitals, it is convenient to assume the above situation.

Compatibility: http://caniuse.com/Search the above units.

Reference: Http://www.w3cplus.com/css/px-to-em
http://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
Http://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html
http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

CSS EM units

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More