Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is the difference between different units in css3". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is the difference between the units in css3?"

Px: absolute units. Pages are displayed in precise pixels.

Em: relative unit, the base point is the font size of the parent node. If you define font-size and calculate it on its own (the default font for the browser is 16px), 1em is not a fixed value throughout the page.

Rem: relative unit, can be understood as "root em", relative to the font size of the root node html to calculate, CSS3 new attribute, chrome/firefox/IE9+ support.

(also note that chrome forces the minimum font to 12. Even if it is set to 10px, it will eventually be displayed as 12px. When the font-size of html is set to 10px, the calculation of the child node rem is still based on 12px, so it is not advisable to set the font-size of html to 10 for convenient calculation as mentioned in many online articles).

For rem applications on mobile, please refer to Taobao's page http://m.taobao.com (the font-size of html is obtained by dynamic calculation)

Page benchmark 320px (20px), calculation of html font-size value:

Var ele=document.getElementsByTagName ("html") [0], size=document.body.clientWidth/320*20; ele.style.fontSize=size+ "px"

Note: the meta zoom ratio needs to be set at 1:1

Vw:viewpoint width, window width, 1vw equals 1% of window width.

Vh:viewpoint height, window height, 1vh equals 1% of window height.

The smaller one of vmin:vw and vh.

The larger of vmax:vw and vh.

Vw, vh, vmin, vmax:IE9+ local support, chrome/firefox/safari/opera support, iOS safari 8 + support, Androidbrowser4.4+ support, chrome for android39 support

Other units include:

%:%

In: inch

Cm: cm

Mm: mm

Pt:point, about 1cm 72 inches.

Pc:pica, about 6ptGrady and six inches.

Ex: take the x height of the font currently in effect, and calculate it in 0.5em if the x height cannot be determined (IE11 and below are not supported, firefox/chrome/safari/opera/ios safari/android browser4.4+ and other attributes are required with no prefix)

Ch: based on the "0" character in the font used by the node, it will be 0.5em if it is not found (supported by ie10+,chrome31+,safair7.1+,opera26+,iOS safari 7.1 font and Android browser4.4+)

At this point, I believe that everyone has a deeper understanding of "what is the difference between the units in css3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.