General Media Queries

by Matheus Stein

HTML

<div class="container">
  :D
</div>

CSS

.container {
  padding:40px;
  border-radius:8px;
  font-family:sans-serif;
  text-align:center;
  font-weight:bold;
  color:white;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
  .container {background:#ed8090}
}
 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
  .container {background:#ed80c3}
}
 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
  .container {background:#de80ed}
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
  .container {background:#a480ed}
}
 
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
  .container {background:#8087ed}
}
 
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
  .container {background:#80c5ed}
}
 
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
  .container {background:#80ede7}
}
 
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
  .container {background:#80ed9d}
}
 
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
  .container {background:#daed80}
}