Responsive Web Design Media Quires

CSS Media Quires:

Now a days website responsive is mostly important. Somewhere everyone called modern website design that means website is responsive too. Without responsive a website is valueless. So it is very important.
So how can we make responsive website?
It is very simple. But quite hard to understand about device layout. Here is only Media Quires.

CSS Responsive Break Points

/*Desktop Layout: 1280px.*/
@media only screen and (min-width: 992px) and (max-width: 1200px){
  CSS code goes here........
}

/*Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px){
  CSS code goes here........
}

/*Tablet + Mobile Layout: */
@media only screen and (max-width: 991px){
  CSS code goes here........
}

/*Mobile layout: 320px.*/
@media only screen and (max-width: 767px){
  CSS code goes here........
}

/*Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px){
  CSS code goes here........
}

All of this are break point. Remember 767px for mobile device. So before work on it, work on Wide Mobile Layout: 480px. Because when you finished your 480px maximum code will work for 767px. So it is easy for you to create mobile layout.

Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *