Modern web browsers have made it easier than ever to create responsive designs with CSS. Responsive CSS is now very common and can be used on nearly every device. In this age, there are devices that can fit in someone’s hand, but have higher pixel densities than desktop monitors. To account for this, modern web browsers use the device’s pixel ratio when calculating the size of a CSS pixel. For simplicity’s sake, let’s add two queries to our CSS: one for phones and one for tablets. Within these queries we can fine-tune font size, div width, etc. CSS media queries enable great control over site responsiveness. Here is an example of responsive CSS that will alter the font size of headers depending on the CSS pixel dimension of the viewport.

/* Default, fall-back styles go here. */
h1.myheader1{
    font-size: 50pt;
}
@media screen and (max-width: 768px){
    /* Tablet-specific code goes here. */
    h1.myheader1{
        font-size: 40pt;
    }
}
@media screen and (max-width: 480px){
    /* This is a good phone break point. */
    h1.myheader1{
        font-size: 30pt;
    }
}

Here is the header using the ‘myheader1’ class: (resize the page to see the responsiveness)

Responsive Header #1

This is a pretty straight-forward approach to responsive design with modern web browsers. There are more queries we can use to hard-code how it should look on each device. However with recent CSS improvements, we can produce a similar effect using the new CSS viewport units without queries. Of course, this is just another way of doing it – responsive methods are entirely based on how the site is designed; one method may work fine for some sites but fall short on another project.

h1.myheader2{
    font-size: calc(27pt + 1.6vw);
}

Notice how we are doing a calculation for font size – the calculation begins with a phone-sized font and adds 1.6% of the viewport width to it. This produces a font size comparable to the previous header, but the size is calculated based on the viewport width. Here is the header produced by using a ‘vw’ (viewport width) unit calculation:

Responsive Header #2

Resizing the viewport shows that the font size dynamically changes with the width of the viewport. If one gets the calculations right and implements viewport units correctly, s/he can create responsive layouts using such units. How do viewport units work? A viewport unit is exactly 1% of its respective viewport dimension. Here are the viewport units and their values in CSS pixels:

• 1vw (viewport width) = 1% of the viewport width
• 1vh (viewport height) = 1% of the viewport height
• 1vmin (viewport minimum) = 1% of the viewport’s smallest dimension
• 1vmax (viewport maximum) = 1% of the viewport’s largest dimension

This can eliminate the use of many percentage values in CSS by specifying the percentage of width or height, as opposed to a percentage value which depends on the property. For example:

/* These two can do the same thing, depending on the context. */
.half-width{ width: 50%; }
.half-width{ width: 50vw; }
/* The width property can be 50% of the viewport height if we wish, which isn't possible with percentage values. */
.width-is-half-of-height{ width: 50vh; }

Percentage units are contextual to the element it is being applied to, while viewport units are always calculated based on the viewport’s CSS pixel dimensions. These are just examples of the potential of responsive CSS with media queries and viewport units. With this, the gap between web and app is even closer.