CSS3: Creating a responsive design with media queries

This entry is part 2 of 13 in the series CSS3

You might want to have a design that will work in handphone, tablet or a normal desktop.

CSS3 Media Queries give you the ability to have the display adjust to different screen widths, heights and even orientation.

In the CSS3 style below, we have the normal desktop where the background will be black, a screen size of between 320px to 400px (handphone) where the background will be blue and a screen size of 401px to 1024px where the background will be red.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - CSS3</title>
    <style>
        body {
            background: black;
            color: #fff;
            font-family: tahoma, verdana, sans-serif;
        }

        h1 {
            font-size: 3em;
        }

        p {
            font-size: 2em
        }

        @media screen and (min-width: 320px) and (max-width: 400px) {
            body {
                background: blue;
            }
            h1 {
                font-size: 2.2em;
            }
            p {
                font-size: 1.5em;
            }
        }

        @media screen and (min-width: 401px) and (max-width: 1024px) {
            body {
                background: red;

            }
            h1 {
                font-size: 2.5em;
            }
            p {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>

<h1>British Rock</h1>

<p>Rod Stewart is one of the
    most popular best-selling music artists of all time, having sold over 100 million records worldwide.
</p>

</body>
</html>