媒体查询响应式网站的最小宽度VS最大宽度

Question

很长一段时间以来我使用以下媒体查询来制作响应式网站

// 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方式,以及为什么他们希望从小型设备开始到大型设备？

谢谢

Answer 1

在目前的形式中，您的问题主要是基于意见的。
最好问问是否有人知道 Bootstrap 方法背后的原因可能是什么，尽管这个问题也主要基于意见。但是，与尝试联系 Bootstrap 的作者相比，在这里获得答案的真正机会要高得多。
这就是为什么我会给你我自己的推理，来自一个动手的方法：我需要完成工作，它必须快速并且必须为生产做好准备。

就查询的顺序@media而言，使用mobile-firstover的唯一理由desktop-first是对于不知道它意味着什么的人来说听起来更好。因此，当您的客户/老板询问时，您可以随时回复他们：

— 是“移动优先”吗？
— 当然，我们使用最新的技术......

但是，在现实世界中，只要您的@media查询对每个响应间隔应用正确的代码，您就做对了。

您应该担心的唯一事情是，在可能的情况下，按此顺序：

• 编写有效代码
• 编写跨设备/跨浏览器代码
• 编写可维护且易于阅读的代码（适用于您和其他开发人员）
• 为相同的功能编写更少的代码。

关于使用emVSpx，这是自举的第二次尝试转储px为em中@media查询。据我所知，由于当时缺乏支持以及em对大量移动浏览器的计算差异，第一次尝试被放弃了。然而，这里需要引用，我找不到关于我记得大约 2 年前读过的那个讨论的任何内容。我什至不确定它是否存在v3或v4当时正在发布的原型。我认为它是v4，虽然。
无论如何，如果他们决定em在 v4em中使用，现在使用可能是安全的。
编辑：仔细观察v4 beta- 9天前发布，看起来你引用的内容来自scss文件，后来解析成px查询到最终的dist code. 所以我假设我记得阅读的讨论今天仍然有效。总之，我建议不要em在您的 CSS@media查询中使用。

最后但并非最不重要的一点是，screen只有当您需要处理页面的打印效果与屏幕上的外观时，才应考虑该部分。

如果您确实需要处理此问题，则根据两者之间的差异，您必须评估在将所有现有 ( screen) 代码应用于print与print从头开始编写所有代码的情况下将覆盖的代码量。

如果 first 更快，请不要添加screen到您的查询并将@media print覆盖放在最后。
如果后者更快，@media screen请将现有代码包装在 中，添加screen到现有查询中，就像 Bootstrap 一样，并将print代码放在另一个中@media print，这样它就不会影响screen.

注意：我更喜欢第一种方法，因为它是一种动手操作的方法，易于测试，并且通常会减少编写的代码。