On Aug 24, 2014, at 7:51 PM, Elli Vizcaino <e7f...@gmail.com> 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 [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/