Responsive

<!DOCTYPE html>
<html>
<head>
    <title>Responsive | Website</title>
</head>
<style type="text/css">
    body{
        text-align: center;
        background-color: black;
        color: white;
        padding-top: 100px;

    }
h1{
    display: none;
}
/*smartphones*/
    @media(max-width: 500px){
        body{
             background-color:  red;

        }

    #smartphones h1  {
        display: block;
    }

}
/*mobiles*/
    @media(min-width: 501px) and (max-width: 768px){
        body{
             background-color:  blue;

        }
        #mobiles h1{
            display: block;
        }
/*tablets*/
@media(min-width: 769px) and (max-width: 1200px){
    body{
        background-color: green;
    }
    #tablets h1{
        display: block;
    }
}


</style>
<body>
    <div id="smartphones"><h1>Smartphones</h1></div>
    <div id="mobiles"><h1>Mobiles</h1></div>
    <div id="tablets"><h1>Tablets</h1></div>
    <div id="iPad"><h1>iPad</h1></div>
    <div id="landscape"><h1 >Landscape</h1></div>

</body>
</html>