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

In this article, the editor introduces in detail "what are the new units in css3", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what are the new units in css3" can help you solve your doubts.

Css3 new units: 1, "ch", the width of the character 0; 2, "rem", a relative unit, mainly relative to the font size of the root element; 3, "vw", window width; 4, "vh", window height; 5, "vmin"; 6, "vmax", etc.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

New unit of length in CSS3

The new units of length in CSS3 are as follows

Ch, the width of the character 0

Rem, which is a relative unit, is mainly relative to the font size of the root element. With rem, we need to refer to the specified root element.

Vw,viewpoint width, window width, 1vw = 1% of window width

Vh,viewpoint height, window height, 1vh = 1% of window height

Vmin,vmax et al.

The new viewpoint-related units are generally aimed at mobile devices.

Rem is actually the same thing as em, except that rem has an extra constraint that represents the font-size of the root element (html element).

The difference between rem and em can be seen through the following example

At this time

Font-size of div2: 16px*1.2em=19.2px

Font-size of div3: 12px*1.2rem=14.4px

Font-size of div4: 12px*1.2rem*1.2em=17.28px

It can be seen that there is no cascade relationship in rem, but there is a cascade relationship in em.

It is worth noting that IE8 and below, Safari 4, IOS 3.2, and so on do not support rem units.

After reading this, the article "what are the new units in css3" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.