长期以来我一直在使用下面的媒体查询来制作响应式网站
// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
但是当我检查 bootsrap 4 时，我注意到他们正在使用以下查询
/* Small. Above 34em (544px) */
@media screen and (min-width: 34em) { ... }
/* Medium. Above 48em (768px) */
@media screen and (min-width: 48em) { ... }
/* Large. Above 62em (992px) */
@media screen and (min-width: 62em) { ... }
/* Extra large. Above 75em (1200px) */
@media screen and (min-width: 75em) { ... }
我想知道我应该继续我的方式还是更好地遵循 bootsrap 方式，
为什么他们决定从小型设备开始转向大型设备？
谢谢
在目前的形式下，您的问题主要基于意见。
最好问问是否有人知道 Bootstrap 方法背后的原因可能是什么，尽管这个问题也主要是基于意见。但是，与尝试联系 Bootstrap 的作者相比，在这里获得答案的真正机会要高得多。
这就是为什么我会给你我自己的推理，来自实践方法:我需要完成工作，它必须快速并且必须准备好生产。
就@media 查询的顺序而言，使用mobile-first 的唯一理由desktop-first 是对于不知道它是什么意思的人来说听起来更好。因此，当您的客户/老板提出以下问题时，您可以随时回复他们:
— 是“移动优先”吗？
——当然，我们使用最新的技术......
但是，在现实世界中，只要您的 @media 查询对每个响应间隔应用正确的代码，您就做对了 .
您唯一应该担心的是，在可能的情况下按此顺序:
- 编写有效代码
- 编写跨设备/跨浏览器代码
- 编写可维护且易于阅读的代码(为您和其他开发者)
- 为相同的功能编写更少的代码。
关于 using em 与 px，这是 Bootstrap 第二次尝试转储 px 用于 @media 查询中的 em。据我所知，由于缺乏支持以及当时大部分移动浏览器的 em 计算存在差异，第一次尝试被放弃了。但是，这里需要引用，我找不到关于我记得 2 年前读过的那个讨论的任何内容。我什至不确定它是围绕 v3 还是当时发布的 v4 原型(prototype)。不过，我认为它是 v4。
无论如何，如果他们决定在 v4 中使用 em，那么现在可以安全使用 em。
编辑:仔细研究v4 beta — 9 天前发布，看起来你引用的是 scss 文件，后来解析为 px 查询到最终的 dist code .所以我假设我记得读过的讨论在今天仍然有效。总之，我建议不要在 CSS @media 查询中使用 em。
最后但并非最不重要的一点是，screen 部分仅在您需要关注页面的打印效果时才应考虑它在屏幕上的样子。
如果您确实需要处理这个问题，根据两者之间的差异，您必须评估如果将所有现有 (screen) 代码应用于 print 与从头开始编写所有 print 代码。
如果 first 更快，请不要将 screen 添加到您的查询中，并将 @media print 覆盖放在最后。
如果后者更快，将现有代码包装在 @media screen 中，将 screen 添加到您现有的查询中，就像 Bootstrap 所做的那样，并将您的 print代码在另一个 @media print 中，因此它不会影响 screen。
注意:我更喜欢第一种方法，因为它是一种亲身实践的方法，易于测试并且通常可以减少编写的代码。