(watch this video in a new tab or window)

 Responsive Design is a design approach allowing for one web page/site to be viewed easily and equally among many different devices and sizes.  It's essentially the way you make your site mobile friendly.  There was a trend not too many years ago to create a separate mobile (or m.) site specifically for smartphone users.  What a silly idea.  People have a very hard time maintaining one site, what made them think they could maintain two sites?  The other thing is that many things were missing on the mobile site.  Whenever I see a mobile site now, I just shake my head and close the window.   
  
With only a few lines of code you can make your site responsive.  Let's learn about it now.  Put this code on a web page and see how the background (and a few other things) change as you change the page size:   
  
/*Responsive Design Style differences for multiple sizes*/   
@media screen and (max-width:320px){   
  body {   
    background:#000;   
    color: #FFF;   
  }   
  A:hover {   
    color: #CCC;   
  }   
}   
@media screen and (min-width:321px) and (max-width:480px){   
  body {   
    background:#CCC;   
  }   
  A:hover {   
   color: #FFF;   
  }   
}   
@media screen and (min-width:481px) and (max-width:600px){   
  body {   
    background:#FAD2D9;   
  }   
}   
@media screen and (min-width:601px) and (max-width:768px){   
  body {   
    background:#D5FAD2;   
  }   
}   
@media screen and (min-width:769px) and (max-width:1024px){   
  body {   
    background:#77BE94;   
  }   
}   
@media screen and (min-width:1025){   
  body {   
    background:#D2DAFA;   
  }   
}