Differences in the use of css3 medium-weight units

This time I will bring you the differences in the use of css3 middleweight units. What are the precautions when using css3 middleweight units. The following is a practical case, let’s take a look.

px: absolute unit, the page is displayed in precise pixels

em: relative unit, the reference point is the size of the font of the parent node, if it is defined font-size press Calculate it by yourself (the default font of the browser is 16px), 1em is not a fixed value in the entire page.

rem: Relative unit, which can be understood as "root em", calculated relative to the font size of the root node HTML. CSS3 has a new attribute and is supported by chrome/firefox/IE9+.

(In addition, please note that Chrome forces the minimum font size to be size 12. Even if it is set to 10px, it will eventually be displayed as 12px. When the font-size of the HTML is set to 10px, the calculation of the sub-node rem is still based on 12px. As a benchmark, many articles on the Internet mentioned that setting the font-size of html to 10 to facilitate calculation is not so advisable).

For mobile application of rem, please refer to Taobao pagehttp://m.taobao.com (html font-size passed Dynamic calculation acquisition)

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 scaling ratio needs to be set to 1:1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vw: viewpoint width, window width, 1vw is equal to 1% of the window width.

vh: viewpoint height, window height, 1vh is equal to 1% of the window height.

vmin: The smaller of vw and vh.

vmax: The larger of vw and vh.

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

Other units include:

%: percentage

in: inch

cm: centimeter

mm: millimeter

pt:point, about 1/72 inch

pc:pica, about 6pt, 1/6 inch

ex: Take the x height of the font of the current effect, in If the x height cannot be determined, it is calculated as 0.5em (not supported by IE11 and below, firefox/chrome/safari/opera/ios safari/android browser4.4+, etc. all require attributes and prefixes)

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of CSS3 shadow box-shadow function

Realization of 3D photo album effect

How to use zoom attribute or overflow:auto in CSS

2D simulation to realize Ferris wheel rotation animation special effects

The above is the detailed content of Differences in the use of css3 medium-weight units. For more information, please follow other related articles on the PHP Chinese website!