Código para teste (debbug) das Media Queries – Design Respon

<!doctype html>

<!--
AUTOR: PiXwell Web Design
SITE: http://pixwell.com.br
Veja o Post completo aqui: http://bit.ly/1covjrW
 -->

<html lang="pt">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>

    <style type="text/css">
    @media(max-width:480px){
        .mobile{background: green}

        .tablet{
            display: none !important;
            visibility: hidden !important
        }
        .desktop{
            display: none !important;
            visibility: hidden !important
        }

    }

    @media(min-width:481px) and (max-width:600px){
        .mobile {
            display: none !important;
            visibility: hidden !important
        }
        .tablet{
            background: blue;
            color: #FFF
        }
        .desktop{
            display: none !important;
            visibility: hidden !important
        }

    }

    @media(min-width:601px){
        .mobile {
            display: none !important;
            visibility: hidden !important
        }
        .tablet{
            display: none !important;
            visibility: hidden !important
        }
        .desktop{
            background: red;
            color: #FFF
        }
    }

    *{margin: 0; padding: 0}
    h2{font-size: 16em}
    h3{font-size: 10em}

    </style>
</head>
<body>
    <div class="mobile">
        <h2>Mobile</h2>
        <h3>Resolução 1</h3>
    </div>
    <div class="tablet">
        <h2>Tablet</h2>
        <h3>Resolução 2</h3>
    </div>
    <div class="desktop">
        <h2>Desktop</h2>
        <h3>Resolução 3</h3>
    </div>

</body>
</html>