提问人：Jeff 提问时间：12/28/2021 更新时间：12/28/2021 访问量：221
将移动优先转换为桌面优先媒体查询，不确定我是否做对了
Converting mobile first to desktop first media queries, not sure if I did it right
问：
我正在构建一个主要用于桌面的应用程序，所以我尝试将 Bootstrap（移动优先）转换为（桌面优先），但不确定它们在功能上是否相同。min-widthmax-width
这就是我的目标，让他们在完全相同的像素断点上做完全相同的事情。
任何CSS大师可以告诉我这些是否相同吗？1 像素的差异扰乱了我的大脑，此时我对媒体查询没有信心。max-width
/* 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赞
Raxi
12/28/2021
#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 */
评论
notmin-widthdocument.documentElement.clientWidth:not