将移动优先转换为桌面优先媒体查询，不确定我是否做对了
Converting mobile first to desktop first media queries, not sure if I did it right
我正在构建一个主要用于桌面的应用程序，因此我尝试将 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 */
迂腐的版本是：
.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 */
我正在构建一个主要用于桌面的应用程序，因此我尝试将 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 */
迂腐的版本是：
.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 */