CSS3 Media Queries

Media queries allow you to customize the presentation of your web pages for a specific range of devices like mobile phones, tablets, desktops, etc.

Media queries are an excellent way to create responsive layouts. Using media queries you can customize your website differently for users browsing on devices like smart phones or tablets without changing the actual content of the page.

Media queries can be used to check many things, such as:

1. width and height of the viewport

2. width and height of the device

3. orientation (is the tablet/phone in landscape or portrait mode?)

4. resolution

Media Queries Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS3 Media Queries</title>

<style type="text/css">
    /* Smartphones (portrait and landscape) ---------- */
    @media screen and (min-width: 320px) and (max-width: 480px){
        body{
background: #990;
}
    }
    /* Smartphones (portrait) ---------- */
    @media screen and (max-width: 320px){
        body{
background: #09F;
}
    }
    /* Smartphones (landscape) ---------- */
    @media screen and (min-width: 321px){
        body{
background: #F3C;
}
    }
    /* tablets, iPads (portrait and landscape) ---------- */
    @media screen and (min-width: 768px) and (max-width: 1024px){
        body{
background: #C00;
}
    }
    /* tablets, iPads (portrait) ---------- */
    @media screen and (min-width: 768px){
        body{
background: #CC0;
}
    }
    /* tablets, iPads (landscape) ---------- */
    @media screen and (min-width: 1024px){
        body{
background: #6C0;
}
    }
    /* Desktops and laptops ---------- */
    @media screen and (min-width: 1224px){
        body{
background: #F90;
}
    }
    /* Large screens ---------- */
    @media screen and (min-width: 1824px){
        body{
background: #3FF;
}
    }
</style>

</head>
<body>

    <h1>CSS3 Media Queries</h1>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

</body>
</html>

Output :

CSS3 Media Queries

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

CSS3 Tutorial