Why em instead of px?

Just quick review: Many of us used px instead of em and still do is as a result of they need management. They don’t wish or can’t cater for a user setting personal font preferences. It’s terribly exhausting to code a style that appears sensible across several font sizes.
At the time of constructing the website, we wish to tell the browser but the things is,
heading is higher font and the paragraph has high. Pixels have perpetually created excellent sense because the chosen unit of measurement; we’re outputting to a screen, thus what else would we tend to use?! However, it seems that pixels square measure inherently inflexible. And it seems that being inflexible is not nice for the online.

Px Vs. Ems:

Pixel(px) unit – Pixel is exact unit and it’s equal to one dot on the display screen. Pixels units don’t scale the font size according to the width of browser window. For example, If we define the 16 pixel any html tag in css for 1600 screen, it remain same font size for screen 1024 or below it.

“Ems”(px) unit – An em could be a unit of menstruation. Similar to pixels, ems will verify the dimensions of parts on an web page. 1 em is adequate to the familial font size. If the font size of html tag is about to 14px, 1 em among that html tag is similar to 14px. If the font size of that changes to 20px, 1em among that similar to 20px. If we tend to apply the line-height to the article, it’ll even hereditary by the paragraph, that is okay.

Convert PX to EM

Typographical scale in pixels, therefore however can we convert that into ems? a straightforward calculation, that expresses the specified font size in reference to the body font size:

Body { font-size:14px; }
H1 { font-size: 1.71em; }  /* 24/14 */
P  { font-size:1.2em; } /* 18/14 */

“Ems” play important role in RWD()

“Ems are also mobile device friendly nature “If you wish to alter the font size of entire web pages according to device screen. It’s difficult to change the font size on different class, tags and id especially when we make these changes in media queries. Let suppose, if we define the font size in em and it depend on the body font size, you need to change the body font size in media queries, then whole web document are adjust the sizes according.

body {
  font-size: x-large;
}
@media (max-width: 1000px) {
  body { font-size: large; }
}
@media (max-width: 500px) {
  body { font-size: medium; }
}

Leave a Comment.