On Aug 24, 2014, at 7:51 PM, Elli Vizcaino <[email protected]> wrote:
> Hello CSS Discuss,
>
> I'm trying to understand how relative font sizes resize in the browser
> because they don't seem to resize proportionately to their containing
> element the way a responsive background image would. The background
> image logo on this page: http://www.e7flux.com/e7flux2014/2222.html
> resizes up or down according to the browser window where as the fonts
> only resize according to the percentages set in the media queries
> depending on breakpoint even though they are contained in elements
> with percentage base widths.
>
> Is there anyway to get font sizing to resize proportionately based on
> containing element width?
>
>
>
> Elli Vizcaino
> http://www.e7flux.com
Hi Elli,
The way I do it is set up your css with pixels first so everything is in it's
place visually.
Then you go and set your body font-size to 1em; (I used to set it to 16px -
don't do that!) then
go and set everywhere else to percentages or ems. This can be tricky, but with
elements (not fonts)
the percentage sizing is based on the parent, or more accurately, it's based on
the parent up the chain
of the dom tree until you get to the body based on the child and parent
positioning, padding, margin, display, etc.
So for example, if a parent is absolutely positioned, I believe the child div
width and height will be based on
the next relative parent or the body (this part I am not positive on).
Now when you set your font-size in ems or percentages remember this.
The body is the main element that percentages or ems are based on, however,
if I have a div in the body and I set its font-size to 80% and I have a span
inside that div
that has a font-size that is 150%, then the sizes would be like so.
Fonts:
body-> 1em (lets say the users browser default is 16px)
div -> 80% 0r 0.8em
— of 1em = 12.8px [16x0.8=12.8 or 16x80/100 = 12.8])
span -> 150% or 1.5em
— 150% of 80% of 1em = 19.2px [12.8x1.5=19.2 or
12.8x150/100=19.2])
Elements:
body -> w:100% h:100% (lets say users screen is 800x600)
div -> w:80% h:80%
— 80% of the body width [ 800x80/100=640px ]
— 80% of the body height [600x80/100=480px]
— Final tally: 640x480
span -> w:150% h: 50%
— 150% of div width [640*150/100=960
— 50% of div height 480/2 = 240px]
— Final tally: 960x240
Then all you should have to do is set a body font-size to what ever em or
percentage works for that @media size.
Now, I don't know if this is a "text book" answer per se, but it's what I have
come across in my studies. :)
HTH,
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
______________________________________________________________________
css-discuss [[email protected]]
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/
