Media Query Example

by Kheema Pandey

HTML

<div class="desktop"></div>
  <div class="laptop"></div>
  <div class="tablet"></div>
  <div class="mobile"></div>
  <div class="iphone"></div>

CSS

div:after{
  margin:4px 0;
  height:40px;
  line-height:40px;
  text-align:center;
  display:block;
  background:gold;
}

.desktop, .laptop, .tablet, .mobile, .iphone
{width:200px;}

.desktop:after{
  content:"DESKTOP"; 
}
.laptop:after{
  content:"LAPTOP"; 
}
.tablet:after{
  content:"TABLET";
}
.mobile:after{
  content:"MOBILE";
}
.iphone:after{
  content:"iPhone";
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.mobile:after{
  content:"SmartPhone Screen";
  background:white;
}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
.tablet:after{
  content:"iPad Screen";
  background:white;
}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
.laptop:after, .desktop:after{
  content:"Desktop Screen";
  background:white;
}
}


/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) 
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
{
.iphone:after{
  content:"iPhone5 Screen";
  background:red;
}
}