Introduction to responsive web-page development (part 3)

This is the Part 3 tutorial of our Responsive web development tutorial series. This tutorial is mainly focussed on CSS media Queries. In my previous parts, we have discussed the earlier portions. Check those first.

CSS MEDIA QUERIES

Most of the time, the website we create will not look the same on all screens. Therefore, we need to tweak it with our CSS. That is where CSS media queries come into the picture. Let us talk more about media queries.

What is a media query?

Media queries are built-in CSS tools that help us denote different conditions for different screen sizes. A media query sets a different condition set for each screen resolution according to the needs of the developer. This is the power CSS gives us. Let us delve more into detail about media queries and how important they are.

First, how do we define a media query?

CSS media queries usually start with an “@media” rule along with a block of CSS statements. The condition specified must be satisfied for these statements to be executed.

Given below is a simple example. Say we want to change the background color of the whole body element to a light grey hue, but only if the screen width is below, say 630px, we use the following code snippet:

@media only screen and (max-width: 630px) 
{
  body{
    background-color: #d1d1d1;
  }
}

What does the above code mean? It is simple and goes as follows:

  • If the screen has a maximum width of 630px, execute the code below, i.e. make the background color of the body as #d1d1d1.
  • If the screen has a width greater than 630px, then the following code will not be executed and the default values are used.

Typical media breakpoints for responsive design

We usually try to generalize code in order to increase versatility. Therefore, we have some common breakpoints for various devices. Here are a few common ones:

 

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Media queries can not only be used based on the screen width and height. Media queries also work with device orientation. For example,  if you want to change the color of the background to say, #d1d1d1 but only when the device is held in landscape, the following code is employed:

 

@media only screen and (orientation: landscape) 
{
  body {
    background-color: #d1d1d1;
  }
}

Try playing around with these queries. Use different configurations and try changing different aspects of the page at different breakpoints and notice the changes.

Introduction to responsive web-page development (part 2) and How to add particles to your website using particle.js

Leave a Reply

Your email address will not be published. Required fields are marked *