CODEWITHSUNDEEP
htmlcssfonts
Greg
Greg

Reputation: 31378

Is there any way to set text size as a percentage to the size of the window using CSS?

Is there a way to style the size of text as a percentage of the browser window? For instance:

h1
{
    height: 15%;
    /* in my ideal world this would be 15% of the window 
       (or parent) size rather than inherited font-size */
}

Upvotes: 4

Views: 3559

Answers (3)

ScottS
ScottS

Reputation: 72261

This would not be perfect, but using media queries could get close.

@media screen and (max-height: 50px) {
  body {
    font-size: 7.5px;
  }
}

@media screen and (max-height: 100px) {
  body {
    font-size: 15px;
  }
}

@media screen and (max-height: 150px) {
  body {
    font-size: 22.5px;
  }
}

@media screen and (max-height: 200px) {
  body {
    font-size: 30px;
  }
}

Etc. You would have to determine when to make a "break" point and how far to take it on the low and high end.

Upvotes: 0

YMMD
YMMD

Reputation: 3780

In CSS3:

h1{
   font-size: 15vw; // relative to the viewport's width
   font-size: 15vh; // relative to the viewport's height
   font-size: 15vm; // relative to the ratio width/height of the viewport
}

But of course this does not work in all browsers.

Please have a look here: http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Upvotes: 5

Keith
Keith

Reputation: 1394

there is a great jquery solution at http://fittextjs.com/ if you don't mind a little js

Upvotes: 1

Related Questions