For as long as I can remember, pixels have been the unit of choice in web development. They're safe and easy to understand. Pixels are a set size and you know how big an image will be when you set them. But what happens when the viewport changes? Let's head over to the world of em and rem.
Using the em unit yields some advantages, but with it, there are also some complications. An em unit is relative to the size of its parent size setting. Let's say your body's font-size attribute is set to 100%:
body {
font-size: 100%;
}If you set a paragraph element nested immediately in the <body> tag to 1em, it will default to 16 pixels, assuming that the browser defaults have not been changed.
So, your HTML will look like this:
<body>
<p>Hello, I am a paragraph set to 1em</p>
</body>Your CSS style will look like the following:
body p {
font-size: 1em;
}The paragraph has now been set to 16 pixels. Had you set the paragraph to 2em, the size would have been 32...