如何使用 CSS 断点创建响应式设计

网站的成功很大程度上取决于用户体验。 如今，用户从许多不同的设备访问网站，并且在每个设备上提供平等的用户体验可能是一个挑战。 这就是 CSS 断点可以派上用场的地方。

CSS 断点对于创建可在任何设备上提供出色用户体验的响应式网站非常有益，但它们仍然是网页设计中更令人困惑的方面之一，尤其是对于新开发人员而言。

让我们开始吧！

什么是 CSS 断点？

CSS 断点是网站内容根据设备宽度响应的点，允许您向用户显示最佳布局。

CSS 断点也称为媒体查询断点，因为它们与媒体查询一起使用。

在此示例中，您可以看到布局如何适应屏幕尺寸。 大分辨率的布局有一个标题和两列正文布局，但在小型设备中它变成一列布局。

如何设置 CSS 断点

棘手的部分是自己决定断点。 没有任何标准模板，不同的框架使用不同的断点。

那么你应该为你的断点采用什么方法呢？

有两种可能的方法可以遵循：

• 基于设备的断点
• 基于内容的断点

基于设备的 CSS 断点

根据不同的设备决定断点听起来是个好主意，但实际上，它并不总是最好的方法。 我们已经有足够多的设备需要担心，当一个新的设备以不同的宽度出现时，回到你的 CSS 并重新添加一个新的断点是非常耗时的。

尽管如此，它仍然是一个可行的选择，因为您可能会发现这对您来说没问题。 以下是特定于设备的断点的示例：

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

使用这种方法，您最终将拥有大量媒体查询。

基于内容的 CSS 断点

决定断点的理想选择是基于您网站的内容。 此方法允许您在内容需要布局调整的地方简单地添加断点。 这将使您的媒体查询更加简单和易于管理。

此断点意味着当设备宽度为 768 像素及以上时，将应用 CSS。

 [css]@media only screen (min-width: 768px){ ... }[/css]

您还可以设置带有断点的范围，因此 CSS 将仅在这些限制内应用。

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

何时使用最小或最大宽度 CSS 断点

您可以使用min-width 、 max-width以不同的方式设置断点，甚至可以将两者结合使用。 但问题是，你应该什么时候使用每一个？

以简单的方式回答它，如果您正在使用移动优先的方法设计布局，那么使用最小宽度断点并按照您的方式进行操作。

为小型设备设置默认样式，并相应地调整大型设备。

同样，如果您首先为较大的设备进行设计，请像往常一样设置默认 CSS，并使用最大宽度方法针对较小的设备进行调整。

在 SASS 中使用 CSS 断点

如果您使用的是 SASS 或 SCSS 之类的预处理器，则可以编写更智能的断点。 Mixin 允许您创建更多要记住的声明性断点，如下所示：

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

在小组中工作时，记住“tablet-up”比 768px 或 48em 容易得多。 任何人都可以理解这个断点； 它适用于平板电脑及以上屏幕尺寸。

使用哪些 CSS 断点

我们已经了解了如何使用断点以及何时使用它们，但问题仍然存在：您应该使用哪些特定的断点？

让我们把事情分解一下。 您需要定位台式机、平板电脑和仅限移动设备的尺寸。 您可以查看一些流行的框架，以了解要遵循的方法。

Bootstrap 在 576px、768px、992px 和 1200px 处有断点。 Foundation 主要在 40em 和 64em 有断点。 在 Bulma，断点设置为 768px、769px、1024px、1216px 和 1408px。

每个都有不同的断点，但它们的共同点是移动优先方法。 您可以使用这些断点之一作为起点，也可以提出自己的断点，如下所示：

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

你明白了！

包起来

总而言之，CSS 断点是重构布局以提供跨不同设备的最佳用户体验的好方法。

始终尝试根据您自己的内容而不是设备创建断点。 将它们分解为逻辑宽度而不是随机宽度，并将它们保持为可管理的数字，因此修改仍然简单明了。

你为你的布局使用了哪些 CSS 断点？ 请在下面的评论部分告诉我们。

下一步是什么？

使用 Local 免费创建和测试您的自定义 Gutenberg 块！

在此处了解有关本地的更多信息！

有关构建响应式网站的更多建议，请查看这些文章！

• 如何使您的 WordPress 网站适合移动设备
• 如何在 WordPress 中创建响应式导航菜单
• 响应式网页设计的 7 个最佳实践技巧