Changing CSS font size with browser window

Is this possible with css or javascript? So If I want 20pt font or 1em font or similar at a certai开发者_StackOverflow社区n browser size but the font to shrink and expand if the browser window shrinks or expands? Thanks

You can use the onResize event to do this. jQuery can be utilized to do this, for example: http://api.jquery.com/resize/ . You only need to apply proper CSS changes on specific elements.

there is no proper css solution that I know of. You can define font-size in % but it will take a % of the pixels of the parent elements font.

You could use mediaqueries, but they will become bigger in steps not fluent.

.p {
   font-size: 20px; 
}    
@media screen and (max-width: 600px) {
  .p {
   font-size: 12px; 
  }
}
@media screen and (max-width: 800px) {
  .p {
   font-size: 14px; 
  }
}
@media screen and (max-width: 1000px) {
  .p {
   font-size: 16px; 
  }
}
@media screen and (max-width: 1200px) {
  .p {
   font-size: 18px; 
  }
}

You can use the units vw (viewport) when defining the font size in the css file and it will scale up or down with the size of the window. Example:

body {
    font-size: 10vw;
}

Here is a solution that does not depend on (non-widely supported parts of) CSS3 or Javascript to work. It uses media queries to change the font-size but thanks to employing SASS it is expressed concisely and it very easy to use:

http://github.com/wadim/responsive-font-size

Supplied with four parameters this mixin will intelligently figure out the right media-query definitions for you.