将移动优先转换为桌面优先媒体查询，不确定我是否做得对答案

【问题标题】：Converting mobile first to desktop first media queries, not sure if I did it right将移动优先转换为桌面优先媒体查询，不确定我是否做得对
【发布时间】：2022-01-26 16:02:45
【问题描述】：

我正在构建一个主要用于桌面的应用程序，因此我尝试将 Bootstrap 的 min-width（移动优先）转换为 max-width（桌面优先），但不确定它们在功能上是否相同。

这是我的目标，让它们在完全相同的像素断点处执行完全相同的操作。

有没有 CSS 大师可以告诉我这些是否相同？ max-width 1 像素的差异让我的大脑很乱，此时我对媒体查询没有信心。

/* 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 */

【问题讨论】：

我认为应该可以正常工作，是的，我认为 1 像素甚至不重要吗？或者，您也可以使用 not 运算符来继续使用您习惯于移动第一版的 min-width 属性（和值）。
您的 mq 将按预期工作。至于它们是否相同……不确定这很重要。 Bootstrap（和所有框架）使用“基于常见屏幕尺寸”的任意 mq，但我们都知道常见的变化永远存在。最好的媒体查询是无媒体查询。
是的，我认为许多常见情况不会导致他们选择的确切值。如果您在 devtools 控制台中键入 document.documentElement.clientWidth，您可能会得到一个不在任何截止点
谢谢大家，我的主要问题是 1px 的差异。如果有人想发布一个可能有一些额外见解的答案，我会给它一个大的 ole green 复选标记。编辑：将:not 运算符放在何处的示例会很有趣。不知道放在哪里。
贴在下面

标签： css responsive-design media-queries

【解决方案1】：

迂腐的版本是：

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

但实际上，截止点并不是超级战略精确值，它们仅代表频谱中分布较为均匀的点，这些点在对常见情况组进行分类方面做得相当不错。因此，担心潜在的1px 偏移可能是浪费时间。

如果您想要快速演示：

@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 */

【讨论】：