0

Is it possible to set the size of the text depending on the width of a browser window? For example when window-width is 1000, than text is 40. And when the window- width is 500 than font size is 20.

user3624504
  • 21
  • 2
  • Here is similar question, I think this might be helpful: https://stackoverflow.com/questions/9021294/can-font-size-be-a-of-container-size-in-css-css3 – mchfrnc May 25 '14 at 22:28

5 Answers5

2

If you are targeting fairly new browsers (>=IE10) and want the text to continuously adjust its size, you can try out the new CSS3 vw unit which is a length unit based on the width of the viewport. However, webkit currently doesn't update the length after it has been set, but this can be worked around by for example binding a resize event which resets the width. Correction: At least Chrome 35.0.1916.114 doesn't seem to have this problem anymore, but Safari 7.0.4 still does. The quirksmode article is apparently a bit outdated.

JSFiddle (with javascript fix for Webkit)

List of supported browsers as well as some other nifty units

Better list of supported browsers (thanks Ian)

Daniel Perván
  • 1,685
  • 13
  • 11
  • 1
    It doesn't? maybe Apple WebKit, but it's working fine in Chrome. But as you point out, it's not very well supported in older browsers - http://caniuse.com/viewport-units. +1 for showing me something I didn't already know about CSS :). – Ian May 25 '14 at 23:02
  • 1
    Ah that is true. The quirksmode article seems to be a bit outdated then since it still states that Chrome renders it as a static length. I'll update my answer to reflect this. – Daniel Perván May 25 '14 at 23:06
1

Yes, you can do this using @media queries. For the examples you named, you would need the following

@media (min-width: 500px) {
    body {
        font-size:20px;
    }
}
@media (min-width: 1000px) {
    body {
        font-size:40px;
    }
}

That would define the font-size to 20px for a browser width of 500-1000px, and to 40px for a browser width of more than 1000px.

Note that if you want to add a style for the default font-size, you would need to define that style before the @media queries, otherwise the styles defined in the queries wouldn't override the default styles.

Joeytje50
  • 18,636
  • 15
  • 63
  • 95
1

You may use media queries as others have pointed out, or you may use this Javascript plugin.

I will include the media queries explanation below just because:

@media (min-width: 1000px) {
    body {
        font-size:40px;
    }
}

This code will change the font size when the window is bigger than 1000px.

Here is a JSFiddle

This question is also a duplicate of many others I've seen...

0
/* Base size (for mobile) */
body {
    font-size: 10px
}
/* All devices when window is bigger than 500 */
@media all and (min-width: 500px) {
    body {
        font-size: 20px;
    }
}
/* All devices when window is bigger than 1000 */
@media all and (min-width: 1000px) {
    body {
        font-size: 40px;
    }
}
JakeSidSmith
  • 819
  • 6
  • 12
0

There are several jQuery libraries that will achieve this.

With these the width of your text is usually updated on window.resize()

Tims
  • 1,987
  • 14
  • 16