CSS – Media queries for (smaller to bigger) and (bigger to smaller) size

When it comes to real website development and big projects, it is sometimes better to use both approaches to get the desired results. So following are the media queries approach I follow to create responsive websites.

/*  Mobile First Approach - Smaller to Bigger Screen Size */

/* Small devices -sm- (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices -md- (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices -lg- (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Extra large devices -xl- (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}



/* Desktop First Approach - Bigger to Smaller Screen Size */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}