Media Queries Examples

by Glynne Turner

HTML

<!doctype html>
<meta name="viewport" content="width=device-width"/>

<body>
<h1>Media Queries Examples</h1>
<p>Increase or decrease the size of your window to see the background color change</p>
    </body>

CSS

p{
 font-family: arial,san-serif;   
    font-size: 13px;
    font-color: black;
}

h1{
 font-size:30px;   
}

@media screen and (min-width:761px){
    body{
    background-color:white;
}
 h1{
    color:red;
}    
}

@media screen and (max-width:760px){
       body{ background-color: #333;
    }
 h1{
    color:red;
}  
p{
    color: white;
}
}

@media screen and (max-width:480px){
       body{ background-color: #807f83;
    }
 h1{
    color:white;
}  
p{
    color: white;
}
}

@media screen and (max-width:300px){
       body{ background-color: #0096d6;
    }
 h1{
    color:white;
    font-size:25px;
}  
p{
    color: white;
}
}