Converting mobile first to desktop first media queries, not sure if I did it right-CodePudding

I'm building an app primarily for desktop, so I tried to convert Bootstrap's min-width (mobile first) to max-width (desktop first), but not sure if they're functionally identical.

That's my goal, to make them do the exact same thing at the exact same pixel breakpoints.

Can any CSS gurus out there tell me if these are identical? The max-width 1-pixel difference is messing with my brain, and I have no confidence with media queries at this point.

/* 1. Mobile first, do your .default stuff below 575 without a media query */

.default-reference {...}        /*    0 -  575 */
@media (min-width: 576px){...}  /*  576 -  767 */
@media (min-width: 768px){...}  /*  768 -  991 */
@media (min-width: 992px){...}  /*  992 - 1199 */
@media (min-width: 1200px){...} /* 1200 - 1399 */
@media (min-width: 1400px){...} /*     >= 1400 */

/* 2. Desktop first, do your .default stuff above 1400 without a media query */

.default-reference {...}        /*     >= 1400 */
@media (max-width: 1399px){...} /* 1200 - 1399 */
@media (max-width: 1199px){...} /*  992 - 1199 */
@media (max-width: 991px){...}  /*  768 -  991 */
@media (max-width: 767px){...}  /*  576 -  767 */
@media (max-width: 575px){...}  /*    0 -  575 */

CodePudding user response：

The pedantic version would be:

.default-reference {...}            /*     >= 1400 */
@media not (min-width: 1400px){...} /* 1200 - 1399 */
@media not (min-width: 1200px){...} /*  992 - 1199 */
@media not (min-width: 992px){...}  /*  768 -  991 */
@media not (min-width: 768px){...}  /*  576 -  767 */
@media not (min-width: 576px){...}  /*    0 -  575 */

But really the cutoff points aren't super-strategic exact values, they merely represent somewhat evenly distributed points along the spectrum which do a moderately decent job at classifying groups of common situations. Hence, worrying about potential 1px offsets is likely a waste of time.

If you want a quick demonstration:

@media all                     { body { background-color: yellow; } body::before { content: 'xxl'; } } /*     >= 1400 */
@media not (min-width: 1400px) { body { background-color: blue;   } body::before { content: 'xl';  } } /* 1200 - 1399 */
@media not (min-width: 1200px) { body { background-color: purple; } body::before { content: 'lg';  } } /*  992 - 1199 */
@media not (min-width:  992px) { body { background-color: red;    } body::before { content: 'md';  } } /*  768 -  991 */
@media not (min-width:  768px) { body { background-color: green;  } body::before { content: 'sm';  } } /*  576 -  767 */
@media not (min-width:  576px) { body { background-color: orange; } body::before { content: 'xs';  } } /*    0 -  575 */