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

This article mainly introduces "how to use REM units in CSS3". In daily operation, I believe many people have doubts about how to use REM units in CSS3. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use REM units in CSS3". Next, please follow the editor to study!

Suppose we have this CSS:

CSS

Articleh3 {font-size:20px;}

Articlep {font-size:12px;}

First, we need to determine the px size relative to all fonts. For convenience, the best thing I can do is to make rootfont-size1px look like this:

CSS

Html {font-size:1px;}

Second, we need to replace the remaining font size values from pixels to rem units.

CSS

Articleh3 {font-size:20rem;}

Articlep {font-size:12rem;}

What REM does, you need 20REM and multiply it by the root element:

20REM*1PX=20PX.

Browser support

IE7 and IE8 still need to use PX values. This will force us to write the font size twice, once in PX and the second time with REM.

CSS

Articleh3 {font-size:20px;font-size:20rem;}

Articlep {font-size:12px;font-size:12rem;}

Examples are as follows:

Html {font-size:1px;}

Articleh3 {

Font-size:20px;/*SupportIE7&IE8*/

Font-size:20rem

}

Articlep {

Font-size:12px;/*SupportIE7&IE8*/

Font-size:12rem

}

Php Chinese website

Words

Php Chinese Network 1

Words

Php Chinese Network 2

Words

At this point, the study on "how to use REM units in CSS3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.