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.
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