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) { ... }

我想知道我应该继续前行还是更好地遵循bootrap方式，为什么他们希望从小型设备开始到大型设备？

谢谢

Answer 1

目前的形式，您的问题主要是基于意见的如果有人知道Bootstrap方法背后的原因可能是什么，可能会更好，尽管这个问题也主要是基于意见的。但是你得到答案的真正机会要比试图联系Bootstrap的作者要高得多这就是为什么我会给你我自己的推理，来自实践方法：我需要完成任务，它必须快速而且必须是准备就绪。

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

- 它是＆＃34;移动优先＆＃34;？
- 当然，我们使用最新技术......

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

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

撰写有效代码

编写跨设备/跨浏览器代码

编写可维护且易于阅读的代码（适用于和其他开发人员）

为相同的功能编写更少的代码。

关于 使用em vs px ，这是Bootstrap第二次尝试转储px em在@media个查询中1}}。据我所知，第一次尝试是由于缺乏支持以及当时大部分移动浏览器的em计算差异而被抛弃的。但是，这里需要一个引用，我无法找到任何关于那个我记得在大约2年前读过的讨论。我甚至不确定它是在v3还是v4原型，当时正在发布。不过，我认为这是v4 ~~无论如何，如果他们决定在v4中使用em，em现在可以安全使用。~~
修改：仔细查看v4 beta - 仅在9天前发布，看起来您引用的内容来自scss文件，后来被解析为px个查询最后的dist code。所以我假设我记得阅读的讨论今天仍然有效。总之，我建议不要在CSS em查询中使用@media。

最后但并非最不重要的是， screen 部分只应在您需要处理页面打印方式与其外观的关系时予以考虑在屏幕上。

如果您确实需要处理此问题，根据两者之间的差异，如果所有现有（screen）代码都应用于{{1}，则必须评估要覆盖的代码量从头开始编写所有print代码。

如果第一个更快，请不要在查询中添加print，并将screen覆盖放在最后。
如果后者更快，请将现有代码包装在@media print中，将@media screen添加到现有查询中，如Bootstrap所做，并将screen代码放在另一个print内，以便不会影响@media print。

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

Answer 2

只要选择一个，选择哪种方式并不重要。两者都完成相同的事情，但是以不同的方式。在desktop-first中，您的“基本”样式适用于桌面/大屏幕，您可以对较小的屏幕进行更改，而在mobile-first中，您可以为移动/小屏幕编写“基本”样式，并对较大的屏幕进行更改。两者都很好，你可以使用你认为更有意义的方法。

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

2 个答案: