Media Queries Examples

by Juan Muñoz

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>
<input type="button" id='btn' value=Click>
    </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:green;
}
 h1{
    color:red;
}    
}

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

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

@media screen and (max-width:360px){
       body{ background-color: yellow;
    }
 h1{
    color:white;
    font-size:25px;
}  
p{
    color: white;
}
}

JavaScript

$(document).ready(function (){
	
  $('#btn').click(function (){
  	$('body').toggleClass("hola")
    if($('body').hasClass('hola')){
      console.log("SI")
    }else{
      console.log("NO")
    }
  })
})