CODEWITHSUNDEEP
cssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

What are the differences between em and % in terms of text resizing and for fixed width site? Is em more hyped than %?

What are the differences between em and % in terms of text resizing and for fixed width site? If I'm using em or % only for text sizing in a fixed width site and body is set as

{body:font-size:100%}

and what is these best practice to use in css for text sizing for fixed width in terms of accessibility and mobile device friendlies?

What is the difference between % and em for using ctrl + 0 to resizing text in browser?

Which is better and why one should be used over another? What is the problem with % and what i the benefit of em

please give explain with live example .

Upvotes: 1

Views: 213

Answers (2)

Mike D.
Mike D.

Reputation: 1457

An em comes from the typographical term of the same name. It is the width of the letter 'm' in the current font. If you set a width to, say, 10em, then the width will be fixed at 10 times the width of an 'm'.

% is a number of hundredths of a whole. It describes a size that is dependent on its potential maximum. So, assuming a simple web page viewed in a browser window, with no columns or anything, a width of 50% means half (50/100) of the width of the window. The actual width will change with the width of the window. If you printed the page out, then the width changes to half the width of the printable area on the paper.

Which one you use depends on whether or not you need the dimension in question to adjust with window size. If you need it to adjust, use %. If you need it to remain a fixed dimension, use em.

EDIT: Ah, relating to the font-size descriptor. Referring to some online docs I use, font-size with a % makes the font size relative to its parent. What's the parent of body? A good question that my reference doesn't answer. I would assume it's either a higher-level specifier (i.e. one that would be overridden) in the CSS, or the document default.

As for em, that one takes the length in ems (as defined above) and converts that to a font size (by, say, converting to mm then to points). Since most fonts don't have an em equal to the line height, I wouldn't expect 1em to mean the same as 100%.

Upvotes: 0

Pablo Fernandez
Pablo Fernandez

Reputation: 105220

Both are ways of specifying relative measures. The difference lies in what are they relative to.

% is relative to the container

em is relative to the font size

So for a practical example check this em example and increase the font size (CTRL and +), you'll see that the divs that contain the text increase their size too.

In this other page, when you do the same, the div's don't increase they size.

source

Upvotes: 2

Related Questions