Resize font-size according to div size

Question

It is made of 9 boxes  with the middle on has text it in  I ve made it so the boxes so they will resize with the screen resize so it will remain in the same place all the time   The text  however  doesn t resize - even when I use percentage    How do I resize the text so it will always be the same ratio from the entire page  Is this a proper solution to handle multiple resolutions  or should I have many  media checks in the CSS and have many layouts for each media types     x000D   x000D  html  x000D  body   x000D    height  100   x000D    width  100   x000D    x000D   x000D   launchmain   x000D    width  55   x000D    display  inline-block  x000D    position  relative  x000D    top  10   x000D    left  25   x000D    x000D   x000D   launchmain after   x000D    padding-top  79 26   x000D    display  block  x000D    content      x000D    margin-top  10px  x000D    x000D   x000D   box1   x000D    border  1px solid  000000  x000D    position  absolute  x000D    width  25 37   x000D    height  21 88  x000D    x000D   x000D   box2   x000D    border  1px solid  000000  x000D    width  48 48   x000D    height  21 88   x000D    position  absolute  x000D    left  25 64  x000D    x000D   x000D   box3   x000D    border  1px solid  000000  x000D    width  25 37   x000D    height  21 88   x000D    position  absolute  x000D    left  74 39   x000D    x000D   x000D   box4   x000D    border  1px solid  000000  x000D    width  33 235   x000D    height  53 84   x000D    position  absolute  x000D    top  22 07   x000D    x000D   x000D   maininvite   x000D    border  1px solid  000000  x000D    width  33 53   x000D    height  53 84   x000D    position  absolute  x000D    top  22 07   x000D    left  33 235   x000D    x000D   x000D   box6   x000D    border  1px solid  000000  x000D    width  33 235   x000D    height  53 84   x000D    position  absolute  x000D    top  22 07   x000D    left  66 765   x000D    x000D   x000D   box7   x000D    border  1px solid  000000  x000D    width  25 37   x000D    height  21 88   x000D    position  absolute  x000D    top  76 2   x000D    x000D   x000D   box8   x000D    border  1px solid  000000  x000D    width  48 48   x000D    height  21 88   x000D    position  absolute  x000D    left  25 64   x000D    top  76 2   x000D    x000D   x000D   box9   x000D    border  1px solid  000000  x000D    width  25 37   x000D    height  21 88   x000D    position  absolute  x000D    top  76 2   x000D    left  74 39   x000D    x000D   x000D   maininvite h2   x000D    font-size  180   x000D    x000D   x000D  p   x000D    position  relative  x000D    font-size  80   x000D    x000D   lt div id  launchmain  gt  x000D     lt div id  box1  gt  lt  div gt  x000D     lt div id  box2  gt  lt  div gt  x000D     lt div id  box3  gt  lt  div gt  x000D     lt div id  box4  gt  lt  div gt  x000D     lt div id  maininvite  gt  x000D       lt h2 gt  header lt  h2 gt  x000D       lt p gt not a lot of text here but still overflowing lt  p gt  x000D     lt  div gt  x000D     lt div id  box6  gt  lt  div gt  x000D     lt div id  box7  gt  lt  div gt  x000D     lt div id  box8  gt  lt  div gt  x000D     lt div id  box9  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I found a way of resizing font size according to div size, without any JavaScript. I don't know how much efficient it's, but it nicely gets the job done.

Embed a SVG element inside the required div, and then use a foreignObject tag inside which you can use HTML elements. A sample code snippet that got my job done is given below.

<!-- The SVG element given below should be place inside required div tag -->
<svg viewBox='0 2 108.5 29' xmlns='http://www.w3.org/2000/svg'>
    <!-- The below tag allows adding HTML elements inside SVG tag -->
    <foreignObject x='5' y='0' width='93.5%' height='100%'>
        <!-- The below tag can be styled using CSS classes or style attributes -->
        <div xmlns='http://www.w3.org/1999/xhtml' style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'>
            Required text goes here            
        </div>
    </foreignObject>
</svg>

All the viewBox, x, y, width and height values can be changed according to requirement.

Text can be defined inside the SVG element itself, but when the text overflows, ellipsis can't be added to SVG text. So, HTML element(s) are defined inside a foreignObject element, and text-overflow styles are added to that/those element(s).

User · Answer

The answer that i am presenting is very simple  instead of using  px   em  or      i ll use  vw    In short it might look like this -    h1  font-size  5 9vw   when used for heading purposes   See this Demo  For more details Main tutorial

User · Answer

My answer does not require Javascript and only relies on CSS3  available in most modern browsers   I personally like it very much if design is not relying on Javascript too much   My answer is a  pure CSS3   no Javascript required -solution   The solution as can be seen here  http   jsfiddle net uNF3Z 16   uses the following additions to the CSS styles  which make use of the  media query of CSS3 which    media all and  min-width  50px       body    font-size 0 1em        media all and  min-width  100px      body    font-size 0 2em        media all and  min-width  200px      body    font-size 0 4em        media all and  min-width  300px      body    font-size 0 6em        media all and  min-width  400px      body    font-size 0 8em        media all and  min-width  500px      body    font-size 1 0em        media all and  min-width  600px      body    font-size 1 2em        media all and  min-width  700px      body    font-size 1 4em        media all and  min-width  800px      body    font-size 1 6em        media all and  min-width  900px      body    font-size 1 8em        media all and  min-width  1000px     body    font-size 2 0em        media all and  min-width  1100px     body    font-size 2 2em        media all and  min-width  1200px     body    font-size 2 4em        media all and  min-width  1300px     body    font-size 2 6em        media all and  min-width  1400px     body    font-size 2 8em        media all and  min-width  1500px     body    font-size 3 0em        media all and  min-width  1500px     body    font-size 3 2em        media all and  min-width  1600px     body    font-size 3 4em        media all and  min-width  1700px     body    font-size 3 6em         What this in effect causes is that the font-size is adjusted to the available screen width  This adjustment is done in steps of 100px  which is finegrained enough for most purposes  and covers a maximum screen width of 1700px which I reckon to be amply  2013  and can by adding further lines be further improved   A side benefit is that the adjustment of the font-size is occuring at each resize  This dynamic adjustment  because for instance the browser windows is resized  might not yet be covered by the Javascript based solution

User · Answer

In regards to your code  see  Coulton  You ll need to use JavaScript   Checkout either FitText  it does work in IE  they just ballsed their site somehow  or BigText   FitText will allow you to scale some text in relation to the container it is in  while BigText is more about resizing different sections of text to be the same width within the container   BigText will set your string to exactly the width of the container  whereas FitText is less pixel perfect  It starts by setting the font-size at 1 10th of the container element s width  It doesn t work very well with all fonts by default  but it has a setting which allows you to decrease or increase the  power  of the re-size  It also allows you to set a min and max font-size  It will take a bit of fiddling to get working the first time  but does work great   http   marabeas io  lt - playing with it currently here  As far as I understand  BigText wouldn t work in my context at all   For those of you using Angularjs  here s an Angular version of FitText I ve made     Here s a LESS mixin you can use to make  humanityANDpeace s solution a little more pretty    mqIterations  19   fontResize  i  when   i  gt  0         media all and  min-width  100px    i    body   font-size 0 2em    i           fontResize   i - 1       fontResize  mqIterations     And an SCSS version thanks to  NIXin    mqIterations  19   mixin fontResize  iterations          i  1        while  i  lt    iterations             media all and  min-width  100px    i    body   font-size 0 2em    i                i   i   1             include fontResize  mqIterations

User · Answer

I was looking for the same funcionality and found this answer  However  I wanted to give you guys a quick update  It s CSS3 s vmin unit   p  li     font-size  1 2vmin      vmin means  whichever is smaller between the 1  of the ViewPort s height and the 1  of the ViewPort s width     More info on SitePoint

User · Answer

Here s a SCSS version of  Patrick s mixin    mqIterations  19   mixin fontResize  iterations       i  1     while  i  lt    iterations          media all and  min-width  100px    i          body   font-size 0 2em    i               i   i   1         include fontResize  mqIterations

[css] Resize font-size according to div size

Examples related to css

Examples related to responsive-design