EM vs REM: Size Matters
Sizing with rem & em
h1 { font-size: 16px } or BODY {font-size:50%}
How easy it is to assign the above in your CSS. But, the above style always leaves the user in browsers like IE and a few more, unhappy. In order to end your struggle with such browsers, the Cascading Style Sheet (CSS) provides an amazing option in the form of em and rem
What are em and rem?They are the relative units of scale used by CSS for various numeric values like font-size, padding, margin, etc.
Here is a standard definition for both.
em : It is in ratio with the sizing standard of its nearest parent element. So em will automatically take the parent font-size (if any).
rem : It is in ratio with the sizing standard of the root element i.e. the standard font-size which our HTML page holds (its 16px).
A simple example
Below is a very simple example of rem and em. The code implemented will showcase the property of both considering the font-size parameter.
I personally prefer em over rem, because the latter limits our approach by providing one single standard whereas in case of em we can set a new standard for each element we work with.
At Kontiki Labs, we are enabling enterprises and businesses of all sizes to use AI powered technologies such as Machine Learning and Deep Learning by building affordable, people focused, design-first AI solutions. You can connect with us on twitter or on email: hi[at]kontikilabs[dot]com
