Responsive Web Design Using Media Queries

Introduction

This article is the second in the series of responsive web designs using CSS3. This article will provide a glimpse at how things actually work using media queries and how useful it can be for designing web sites.

For the basic details of media queries in CSS3 please go through this article.

Media Queries in CSS

To become familiar with design issues, please go through this article.

Design Issues vs CSS3

Description

In this article, I'll explain the coding of the look and features that can be changed depending on the display size using media queries.

How does it work?

You only need to merge a few sets of coding lines of media queries using CSS3 and you will see the magic of media queries. You will also better understand the meaning and the sense of responsive web design and why it is so necessary for the current development and design scenarios of websites and web applications.

What do we need to do?

We only need to create an external CSS file and call it in our simple HTML page, that's all. It will work depending on that.

Call external CSS file in HTML page using.

<link rel="stylesheet" type="text/css" href="multipleback.css"/>

Coding

CSS CODE

body {
    background-color: grey;
}

@media screen and (max-width: 920px) {
    body {
        background-color: red;
    }
}

@media screen and (max-width: 720px) {
    body {
        background-color: orange;
    }
}

@media screen and (max-width: 540px) {
    body {
        background-color: yellow;
    }
}

@media screen and (max-width: 320px) {
    body {
        background-color: green;
    }
}

Output Screens

// default screen

After running the simple HTML page by default you will get this output screen in the display.

// second screen

// 920px

The screen after increasing or zooming the display.

// third screen

// 720px

Increasing the display zoom

// fourth screen

// 540px

On increasing the zoom

// fifth screen

// 320px

Last screen (but not least)

You can extend the resolution screen and display screen colors depending on you to any limit but don't go too far, because it will create nonsense in your design.