7

I am aware of the CSS 3 units vw, vh and vm, which seem to be useful for making elements that have their box sizes and text sizes relative to the browser's viewport size. However, sadly, these are not well-supported with the current major browsers; only Internet Explorer 9+ does.

What other methods can I use to do things like CSS font-size properties that scale with the viewport? I would like to avoid JavaScript and/or jQuery solutions if possible.

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210

1 Answers1

8

Doing a 100% scalable website is possible. As Rev said, you can do this by using percentage values, but it is tricky.

The better option is to utilize @media queries. These allow you to apply CSS rules to a page only under certain conditions. By using media queries to detect the device width and/or the page width, you can apply fine tune control over how your site looks AT different viewport sizes. For instance:

@media screen and (max-device-width: 960px) {
    font-size:14px;
}
@media screen and (max-device-width: 480px) {
    font-size:13px;
}

Now, the above example is rather trivial and contrived. For a deeper understanding of what you can accomplish with media queries, I recommend you view the W3C spec page. Some of the most powerful are the width, min-device-width, max-device-width, portrait|landscape, and print queries.

As a side note, make sure to include these styles at the bottom of your CSS, so that they dont get overwritten by default styles.

Moses
  • 9,033
  • 5
  • 44
  • 67
  • That's a great idea. Is it also possible to have a completely scaling layout, instead of just two 'intervals'? Also, what's the difference between `max-device-width` and `max-width`? – Delan Azabani Aug 03 '11 at 02:59
  • @Delan I wouldn't worry about a completely scaling website simply because a user can just as easily "pinch zoom" the text to a comfortable level. All you should focus on is setting an initial text-size that will be comfortable for them. (and as a side note, you can use any pixel value for the widths, and you aren't limited to just two. Read up on those styles and you'll see just how much control you have. – Moses Aug 03 '11 at 03:03
  • You could do a bunch of different sizes, but honestly having just 2-3 is probably best. When designing sites it's good to be as consistent across computers as possible, so having a few different @media's is better than completely scalling. However, if you want to absolutely scale, you could do everything in percentages, but that's a little tricky. – JacobTheDev Aug 03 '11 at 03:04