Question

I’m working on a site and would like scale the contents to scale whenever the browser window is resized. Here’s an example of what i’m trying to achieve. Go ahead and re-size the browser to see what i’m after. Can someone tell me how the author achieved this ? Or what this technique is called? I already have a good handle on CSS and know about liquid layouts but the technique used on this site is very distinct. I can’t wrap my head around how he managed to scale many portions of the site, even the little picture on the side scales down. Can someone tell me how this is achieved ? I’m really after the concept or the name of the technique. Thanks.

Answer 1

It’s known as Responsive Design, and there’s a pretty good book on the subject.

In simplest terms, it’s taking advantage of media queries to adapt your content for a range of resolutions.

/* targets screens matching the specific sizes */
@media screen
  and (min-device-width: 320px)
  and (max-device-width: 480px) {
  /* css rules here */
}

@media screen
  and (min-device-width: 481px)
  and (max-device-width: 960px) {
   ...
}

@media screen and (min-device-width: 961px) {
   ...
}

The sizes will all very based on how wide your content is and what kind of layout you’re using so you’ll have to target specific sizes that best fit your needs. Of course there’s more to it than that, but there’s plenty of resources and tutorials out there.