Mobile and Desktop media query priority-CodePudding

I'm a beginner in front-end web development. I want to know the order of priority when writing CSS media queries in desktop first approach. Do i write mobile queries first and tablet queries below it, in this manner:

/*Desktop CSS*/ /*Media query for tablet*/ /*Media query for Mobile*/

or the other way around.

CodePudding user response：

You can write anywhere but if you are a beginner then I suggest you create a separate file for responsive CSS so that you will not confused. SO in the style.css desktop approach and in responsive.css all media queries for mobile and tablet. Standered Media queries:

@media screen and (min-width: 1200px){} /* Desktop */
@media screen and (min-width: 1025px) and (max-width: 1199px){} /* small laptop */
@media screen and (min-width: 768px) and (max-width: 1024px){} /* tablet */
@media screen and (min-width: 575px) and (max-width: 767.98px){} /* tablet and large mobiles */
@media screen and (min-width: 320px) and (max-width: 480px){} /* Mobile*/

Thanks