<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>No Tile</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="class1200 mediaClass">class1200</h1>
<h1 class="class992 mediaClass">class992</h1>
<h1 class="class768 mediaClass">class768</h1>
<h1 class="class480 mediaClass">class480</h1>
<h1 class="class320 mediaClass">class320</h1>
<h1 class="class320less mediaClass">less then class320</h1>
</body>
</html>
// Code goes here
/* Styles go here */
/*Media query for sticky header when resizing window */
@media handheld, only screen and (max-width: 767px){
}
.mediaClass{
display:none;
}
/*========== Media queries for Mobiles ==========*/
@media only screen and (min-width : 200px) {
body{
background-color: #bfb;
color:black;
}
.mediaClass{
display:none;
}
.class320less{
display:block;
}
}
@media only screen and (min-width : 320px) {
body{
background-color: gray;
color:black;
}
.mediaClass{
display:none;
}
.class320{
display:block;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
body{
background-color: purple;
color:black;
}
.mediaClass{
display:none;
}
.class480{
display:block;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
body{
background-color: blue;
color:black;
}
.mediaClass{
display:none;
}
.class768{
display:block;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
body{
background-color: green;
color:black;
}
.mediaClass{
display:none;
}
.class992{
display:block;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
body{
background-color: red;
color:black;
}
.mediaClass{
display:none;
}
.class1200{
display:block;
}
}