Scaling elements for responsive design with CSS

CSS gives us all kinds of options for sizing text and elements. If you are new to cascading style sheets, read more here to find out about their uses and benefits. They will make your sites faster, let you update page layouts more easily, help you lose fat, build muscle and just generally become more attractive.

Responsive designs need to flex to the screen size of many different devices, from large monitors to small phones. This has led to the current trend in basic and flat designs. The layout needs to work on a 1920-pixel wide monitor just as well as on a 320-pixel wide iPhone screen. Simple is better in this instance. Few companies have the time or desire to maintain separate purpose-built websites, although it does happen.

The easiest way previously was to size elements using percentages. Say we have an h1 heading inside our div with the id of “toast”. In our style sheet, we’ll say #toast h1{width:80%;}. This sizes the h1 to 80% of the width of the parent element, our div called toast. But the parent element is also flexing to different screen sizes, and what if that parent element is fitting to a percentage of its parent, and so on up the chain?

This leads to unpredictable results, and we’re really more concerned about the size of our h1 in relation to the actual screen.

CSS3 has helped us out here by introducing four different viewport percentage units.

  • vh – 1% of viewport height
  • vw – 1% of viewport width
  • vmin – 1% of whatever is smaller, viewport width or height
  • vmax – 1% of whatever is larger, viewport width or height

The viewport referred to is the size of our actual screen. So the iPhone previously mentioned has a viewport width of 320 points. Scaling text at font-size:10vw; will size the text to 10% of the viewport width, or 32 points. If we were to scale the text with font-size:10vmax, it would size the text to 10% of the larger size. In the iPhone 5’s case, the text would be 56.8 points.

Using this set of viewport sizing units can help you hit on the best resizing factor for different elements in your site or app. Find out more at:

https://www.w3.org/TR/css3-values/#viewport-relative-lengths