Geek Answers Handbook

Why do some developers twice determine the font size with different units?

I develop themes for websites using start themes, and I see that developers define properties with different units twice, for example:

body, button, input, select, textarea { color: #404040; font-family: sans-serif; font-size: 16px; font-size: 1rem; line-height: 1.5; }

What is the reason for this?

+6
source share
1 answer

In the example you specified, the first font-size specified ( 16px ) will provide a backup for browsers that do not support rem . Browsers that support rem devices will use the last font-size ( 1rem ) because it is defined after the first and therefore replaces it.

 body, button, input, select, textarea { color: #404040; font-family: sans-serif; font-size: 16px; /*This is set first and provides a fallback if rem units are not supported */ font-size: 1rem; /*This second defintion supersedes the first in supported browsers because it is defined after the first definition */ line-height: 1.5; }

Here is CANIUSE which supports browser in detail, etc. This is actually really good support; it is only really IE8 or lower that it will fail: http://caniuse.com/rem

Here's a good article on REM units: http://www.sitepoint.com/understanding-and-using-rem-units-in-css/

+3
source

More articles:


All Articles