How to use REM units in CSS3
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!
