我应该使用什么媒体查询断点？

响应式设计需要大量的媒体查询。这是大家普遍认同的，但我们应该写min-width还是max-width呢？我们应该使用768px还是780px？这方面存在很多分歧，所以我深入研究了一下，看看在这个问题上是否有既定的共识。

@media (min-width: /* ??? */) {
}

我们设计的目的是什么？

在我们弄清楚要使用什么媒体查询断点之前，我们需要看看我们正在为哪些设备进行设计。

我研究了一些常见的设备分辨率，大多数都可以归类。我列出了这些类别以及它们对应的分辨率：

移动肖像（320px 至 414px）
适用于屏幕为 4 英寸至 6.9 英寸的设备。
移动横向（568px 到 812px）
相同，但是横向。
平板电脑肖像（768px 至 834px）
适用于 7 英寸至 10 英寸的设备
平板电脑横向显示（1024px 至 1112px）
同上，但纵向显示 12 英寸平板电脑
笔记本电脑和台式机显示器（1200px+）
差异很大，但通常为 1200px 及以上

设备

我们来看看几款 iOS 设备。虽然 Android 设备也很重要，但它们的差异很大——大多数手机的设备 DPI 都是可调的。大多数 Android 手机的默认设置与 iOS 手机的设置差不多，所以让我们来看一下。

以下是一些常见设备的列表，以及它们与设备无关的像素宽度：

类别	宽度	设备
移动端，肖像	`320px`	iPhone SE
	`375px`	iPhone 6、7、8、X
	`414px`	iPhone 8 Plus
移动端，横向	`568px`	iPhone SE
	`667px`	iPhone 6、7、8
	`736px`	iPhone 8 Plus
	`812px`	iPhone X
平板电脑，纵向	`768px`	iPad Air、iPad Mini、iPad Pro 9 英寸
	`834px`	iPad Pro 10 英寸
平板电脑，横向	`1024px`	iPad Air、iPad Mini、iPad Pro 9 英寸
	`1024px`	iPad Pro 12 英寸（纵向）
	`1112px`	iPad Pro 10 英寸
笔记本电脑显示器	`1366px`	高清笔记本电脑 (768p)
	`1366px`	iPad Pro 12 英寸（横向）
	`1440px`	13 英寸 MacBook Pro（2 倍缩放）
桌面显示器	`1680px`	13 英寸 MacBook Pro（1.5 倍缩放）
	`1920px`	1080p 显示器

最常见的断点

我查看了 2019 年一些最流行的 CSS 框架（以及一些过去的框架），看看它们使用的断点。大多数框架使用的断点都相同，只有少量差异。

框架	小的	中等的	大的	特大
布尔玛	-	`min: 769px` （“移动的”）	`min: 1024px` （“桌面”）	`min: 1216px` （“全高清”）
Bootstrap 3	-	`min: 768px`	`min: 992px`	`min: 1200px`
Bootstrap 4	`min: 576px`	`min: 768px`	`min: 992px`	`min: 1200px`
顺风	`min: 576px`	`min: 768px`	`min: 992px`	`min: 1200px`
祖尔布基金会	-	`min: 640px`	`min: 1024px`	`min: 1200px`

768像素、992像素、1200像素

许多框架使用768px、992px和1200px。这一直是 Bootstrap 3 的默认断点，并且似乎被认为足够合理，已被其他项目采用。

没有小断点？

有些人选择不在 700px 以下设置断点。这很可能是 Bootstrap 3 沿用的做法，它主张将移动端的横屏视图与竖屏视图保持一致。Bootstrap 4 后来改变了这一立场，我个人也同意——在横屏屏幕上看到过高的标题确实很烦人！

576px从何而来？

在 Bootstrap 4 添加576px断点之前， 576px480px是一个很受欢迎的选择。最终选择了 576px，因为它大约位于 320px 和 768px 的中间值（+32px）。我个人认为选择 576px 而不是 480px 没什么大不了的（反之亦然）；两者都足以覆盖 iPhone 8 Plus 的 414px 宽度。然而，我更喜欢 576px，480px因为 576px 仍然能够覆盖 iPhone SE 的横屏视图。

640像素

Zurb 的640px断点选择很有意思。它既涵盖了平板电脑纵向屏幕，也涵盖了（大部分）移动设备横向屏幕。

那么我应该使用什么？

这主要是主观的，可能取决于你设计的屏幕类型。我以这组断点作为起点，并推荐它们用于大多数项目。

断点	目的
（默认）	手机肖像
最小宽度：`480px`	移动端横向（及更大）
最小宽度：`768px`	平板电脑纵向（及更大）
最小宽度：`992px`	平板电脑横向（及更大）
最小宽度：`1200px`	笔记本电脑（和笔记本电脑）

避免最大宽度

我建议只使用，尽量min-width避免。混合使用 min-width 和 max-width 可以使 CSS 代码更短，但阅读起来会更困难。max-width

偏移最大宽度

如果必须使用max-width，请务必将其偏移至少 0.02px。也就是说，使用max-width: 479.98px而不是max-width: 480px，因为后者会与有小的重叠min-width: 480px。

480px 还是 576px？

我建议使用480px而不是576px仅仅因为它也可以覆盖较小的手机（例如 iPhone SE）。

我应该使用 768px 吗？

可能min-width: 768px不像大多数人想象的那么有用。如果你正在为平板电脑竖屏设计，可以考虑使用min-width: 480px，它在移动端横屏上看起来可能也不错。Zurb 基金会似乎也提倡这种移动端横屏和平板电脑竖屏共同设计的理念，因为他们用640px作为了断点。

768px 的秘密

指南中经常将断点min-width: 768px描述为“平板电脑横屏”。这很容易让人误解，因为它也适用于平板电脑竖屏模式。min-width: 992px如果您需要针对平板电脑横屏模式，请使用。（您也可以使用769px，但这不适用于 iPad Pro 10"）。

我该如何命名它们？

我个人不喜欢用small、medium和来称呼large。这些词可能会引起歧义；iPad Pro 10 英寸算中号还是大号？iPhone SE 算超小号吗？这些词都是相对的，它们的主观性可能会造成一些混淆。

我也不喜欢把它们叫做mobile等等tablet。iPad Pro 12 英寸是平板电脑，但为什么只能用desktop媒体查询来定位它？三星 Note 从技术上讲是手机，但为什么它上面盖着tablet？这是否tablet考虑了横向或纵向屏幕？如今，设备分类之间的界限有点模糊。

相反，我建议用更通用的名字来称呼它。大多数设计师都熟悉“700px 的感觉”，所以我觉得这个名字更合适。我喜欢用最接近的百分之一来命名，就像这样。

@custom-media --viewport-4 (min-width: 480px);
@custom-media --viewport-7 (min-width: 768px);
@custom-media --viewport-9 (min-width: 992px);
@custom-media --viewport-12 (min-width: 1200px);

@media (--viewport-4) {
  /* ... */
}

谢谢你！

希望以上内容对您有所帮助。参考文献：

鏂囩珷鏉ユ簮锛�https://dev.to/rstacruz/what-media-query-breakpoints-should-i-use-292c