On Jul 25, 2014, at 6:02 AM, "Mike & Martha" <mmr...@comcast.net> wrote:
>
>
> ------ Original Message ------
> From: "Karl DeSaulniers" <k...@designdrumm.com>
> To: "CSS-Discuss Discuss" <css-d@lists.css-discuss.org>
> Sent: 7/25/2014 4:59:48 AM
> Subject: Re: [css-d] why are ems rendering large?
>
>> Actually, I believe ems are based on the prior font-size of the element in
>> which its contained. rems are based on body.
>> For example, If you have a div in the body with no font-size set and a span
>> inside that div with font-size set to 120% then it will be 120% of the body
>> font-size.
>> However, if the div has a font-size of 110%, then the span would have a
>> font-size that is 120% of 110% the divs calculated font-size would be of the
>> body font-size.
>> Stay with me.. :)
>>
>> Example 1:
>> <Body font-size = 16px
>> <div font-size = none set
>> <span font-size (120%) = 19.2px
>>
>> Example2:
>> <Body font-size = 16px
>> <div font-size (110%) = 17.6px
>> <span font-size (120%) = 21.12px
>>
>> Please someone correct me if I am wrong.
> Well, your math is correct, but it shows that the calculated font size is
> based on the span's parent font size which is the div.
>
> Now if you had used a rem in your calculation this wouldn't have occurred
> because the font size would have been base on the Root font size; that's the
> definition of rem, a root-based em.
>
> That's beauty of using rems, they are stable in that they're based on the
> root font-size, but they are dynamic and relate to size changes of objects
> and screens.
>
> /* Example3: */
> body {
> font-size: 16px;
> }
> <div style= "font-size: 110%></div> /* = 17.6 px
> */
> <span style= "font-size: 1.2rem></span> /* (1.2 * 16px) = 19.2 px */
> Michael Rose
>
My apologies, I was speaking about ems.
Just made reference real quick to rems being the one based on the body only.
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
