ATOZ CSS：通过媒体查询创建响应式设计

关键要点

• 避免在创建响应式设计时使用特定设备的断点。相反，设置主要断点和次要微调点，这些断点大约是大多数手机、平板电脑和台式/笔记本电脑设备的尺寸。
• 使用 em 或 rem 作为断点单位，而不是像素，以获得更好的可伸缩性。如果用户缩放页面或增加文本大小，这将有所帮助。
• CSS 媒体查询是创建响应式设计的强大工具。它们允许您为具有不同屏幕尺寸的不同设备应用不同的样式。但是，避免使用它们来定位特定设备，因为这会导致维护噩梦。相反，专注于创建适用于所有屏幕尺寸的响应式设计。

本文是 AtoZ CSS 系列的一部分。在此处查看媒体查询的完整屏幕截图和成绩单。

欢迎来到我们的 AtoZ CSS 系列！在本系列中，我将探索不同的 CSS 值（和属性），每个值都以字母表的不同字母开头。我们知道，有时屏幕截图是不够的，因此在本文中，我添加了一个关于媒体查询的新快速提示/课程。

M 代表媒体查询

我猜想，绝大多数网页设计师和开发人员如今都熟悉响应式设计的概念。如果不是，请查看媒体查询屏幕截图。

由于响应式设计非常流行，因此这是一个学习一些技巧的好地方，这些技巧可以改进我们为多种设备开发网站和应用程序的方式。以下是一些 CSS 提示，可以帮助您。

技巧 1：不要使用特定设备的断点

希望这不用说，但以防万一您需要提醒或以前没有遇到过这种最佳实践，我认为值得重申一下。

特定设备的断点很容易在您的代码中通过如下所示的媒体查询识别（添加注释以提高清晰度）：

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

这些断点已针对 Apple 设备设置，并具有“神奇数字”值，例如 768px 或 1024px。

如果用户的窗口是 1025px 或 1023px 怎么办？

媒体查询将不会生效，并且该设备尺寸的样式将不会应用。

有时您可能需要断点的非常具体的数值（稍后会详细介绍），但在我看来，看到这些特定设备的断点是一种代码异味。

那么你应该怎么做呢？

技巧 2：设置主要断点和次要微调点

在响应式项目上工作时，我倾向于设置任意整数断点，这些断点大约是大多数手机、平板电脑和台式/笔记本电脑设备的尺寸。

我倾向于使用以下主要断点（尽管有时这可能会根据项目而有所更改）：

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

使用这些断点不会将设计限制为仅在这些点处更改，而是为使用三种主要设备类型提供良好的基础。

对于基于内容的设计调整（即：当内容开始看起来损坏、不平衡或不太适合时），您可以使用微调点来调整元素并润色项目的细节。

<code>/* 大手机和小平板 */
@media screen and (min-width: 500px;) {}

/* 平板电脑和小显示器 */
@media screen and (min-width: 800px;) {}

/* 笔记本电脑和台式机 */
@media screen and (min-width: 1200px;) {}</code>

技巧 3：使用 em 或 rem 作为断点单位

不要使用 px，而是使用这些相对单位之一，以便如果用户缩放页面或增加文本大小，可以获得更好的可伸缩性。例如，当我使用 em 单位进行大小调整时，上面的主要断点如下所示。

<code>/* 调整共享按钮的位置 */
@media screen and (min-width: 1150px;) {
  margin-right: 1em;
}</code>

关于 CSS 媒体查询和断点的常见问题解答 (FAQ)

什么是设置 CSS 断点的最佳实践？

CSS 断点对于创建响应式设计至关重要。它们允许布局在预定义点处更改，即为不同屏幕尺寸提供不同的布局。设置 CSS 断点的最佳实践包括首先从移动布局开始，然后逐步向上工作。还建议使用 em 或 rem 单位而不是像素作为断点，因为它们更灵活且更易于访问。最后，避免使用过多的断点。坚持使用移动设备、平板电脑和台式机的标准尺寸。

如何将 CSS 媒体查询用于响应式设计？

CSS 媒体查询是创建响应式设计的强大工具。它们允许您为具有不同屏幕尺寸的不同设备应用不同的样式。您可以使用 @media 规则、媒体功能的条件（如 max-width 或 min-width）以及您想要应用的 CSS 样式在 CSS 中使用它们。

响应式设计的标准 CSS 断点是什么？

响应式设计的标准 CSS 断点通常如下：移动设备为 320px，平板电脑纵向为 768px，平板电脑横向和小台式机为 1024px，大台式机为 1200px。但是，这些并非硬性规定，可以根据设计的具体需求进行调整。

如何测试我的 CSS 断点？

您可以使用浏览器中的检查工具来测试您的 CSS 断点。此工具允许您模拟不同的屏幕尺寸并查看您的布局如何响应。此外，您可以使用 BrowserStack 或响应式设计测试网站等在线工具在不同的设备和屏幕分辨率上进行测试。

我可以使用 CSS 媒体查询来定位特定设备吗？

是的，您可以使用 CSS 媒体查询来定位特定设备。但是，通常不建议这样做，因为它会导致维护噩梦。相反，专注于创建适用于所有屏幕尺寸的响应式设计。

如何使用 CSS 媒体查询更改字体大小？

您可以使用 CSS 媒体查询根据屏幕尺寸更改字体大小。例如，您可能希望为更大的屏幕增加字体大小以提高可读性。您可以通过定义具有所需屏幕尺寸的媒体查询，然后设置新的字体大小来实现此目的。

CSS 媒体查询中的 min-width 和 max-width 有什么区别？

CSS 媒体查询中的 min-width 和 max-width 指的是媒体查询内的样式将应用的最小和最大视口大小。min-width 用于为大于指定值的任何视口大小应用样式，而 max-width 用于为小于或等于指定值的任何视口大小应用样式。

我可以将 CSS 媒体查询与 JavaScript 一起使用吗？

是的，您可以使用 window.matchMedia() 方法将 CSS 媒体查询与 JavaScript 一起使用。此方法返回一个 MediaQueryList 对象，该对象表示指定 CSS 媒体查询字符串的结果，然后可以使用它根据屏幕大小应用不同的 JavaScript 功能。

如何使用 CSS 媒体查询处理高分辨率屏幕？

您可以使用分辨率媒体功能使用 CSS 媒体查询处理高分辨率屏幕。此功能允许您根据屏幕的像素密度应用样式。例如，您可能希望为高密度屏幕提供更高分辨率的图像，以确保它们看起来清晰锐利。

我可以使用 CSS 媒体查询检测暗模式吗？

是的，您可以使用 CSS 媒体查询来检测用户是否将其系统设置为暗模式。您可以使用 prefers-color-scheme 媒体功能来实现此目的。此功能允许您根据用户的首选颜色方案（即浅色或深色）应用不同的样式。

以上是ATOZ CSS：通过媒体查询创建响应式设计的详细内容。更多信息请关注PHP中文网其他相关文章！