Conditional loading

Responsive designs combine three main techniques, which are as follows:

• Fluid grids

• Flexible images

• Media queries

The technique that I want to focus on in this section is media queries. In most cases, developers use media queries to change the layout, width height, padding, font size and so on, depending on conditions related to the viewport.

Let's see how we can achieve conditional image loading using CSS3's image-set function:

.my-background-img {
background-image: image-set(
 url(icon1x.jpg) 1x,
 url(icon2x.jpg) 2x
);
}

You can see in the preceding piece of CSS3 code that the image is loaded conditionally based on its display type. The second statement url(icon2x.jpg) 2x would load the hi-resolution image or retina image. This reduces the number of CSS rules we have to create. Maintaining a site with a lot of background images can become quite a chore if a separate rule exists for each one.

Here is a simple media query example:

@media screen and (max-width: 480px) {
    .container...