Mobile First Media Queries for Resposive sites

Today we will look into media queries. Many peoples are searching for media queries format on google, but many times they dont get proper solution . so i am sharing Media query structure which i follow while writing css. hope this will be useful for all of you.

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

Which direction should you choose when writing the CSS for a responsive website?

1) Mobile First :-
Start with the CSS for narrow viewports , then increase viewport and add breakpoints when needed.

2) Desktop First :-
Start with the CSS for wider viewports , then decrease viewport and add breakpoints when needed.

Mobile First Structure is as follows

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){
      /* Some CSS Here */
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){
      /* Some CSS Here */
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px){
      /* Some CSS Here */
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){
      /* Some CSS Here */
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){
      /* Some CSS Here */
}

All the best........