使 WordPress 主题响应的主要功能是什么？

现在是 2023 年，这意味着响应式网页设计不再是一种选择，而是一种必需。

92.3% 的互联网用户通过移动设备访问网络，全球近 60% 的网络流量来自移动设备，如果 WordPress 主题要满足现代用户的需求，就必须完全响应。

那么，究竟什么是响应式主题设计呢？

哪些基本组件可确保主题在任何设备上都能完美运行，它们究竟是如何工作的？

您将在本指南中找到所有这些问题的答案。

无论您是希望掌握选择最佳响应式 WordPress 主题所需的所有知识的网站所有者，还是准备构建您的第一个主题的新手设计师，我们都概述了您需要了解的有关 WordPress 主要功能的所有信息响应主题。

是什么让 WordPress 主题响应？

在最基本的意义上，响应式 WordPress 主题是任何改变其设计和整体布局以适应用户查看它的设备的主题。

这意味着，如果您在三种不同的平台（例如，台式电脑、iPad 和 Android 手机）上加载您的网站，它在每个平台上的外观可能会有所不同，但会在该特定设备上为用户提供最佳体验。

响应式主题的主要特点是什么？

使 WordPress 主题以响应方式执行具有三个基本功能。

这些包括：

文章在下面继续

1.灵活的网格系统

在网络的早期，设计人员遵循印刷出版物中使用的相同布局原则，基于像素为其页面布局设置固定的绝对大小。

一旦我们中的大多数人开始离开我们的台式机并通过平板电脑和智能手机访问网络，很快就会发现这不再有效。

具有固定布局的页面在这些设备上通常看起来不太好，即使总体审美没有问题，导航和站点功能通常也可能太小或难以使用。

出于这个原因，致力于响应式主题的设计师开始改变他们的方法并使用灵活的网格系统。

作为任何响应式主题的基石，灵活的网格布局提供了一个框架，使主题能够切换其布局以适应设备类型和屏幕尺寸。

简而言之，这些系统由一系列网格和列组成，使用 CSS（层叠样式表）语言来控制它们在不同设备上的调整方式。

例如，可以使用 CSS 来确定网站应该在桌面显示器上分布在多个列中，但在较小的屏幕（例如 iPhone）上简化为单个列。

如果没有这样的系统，主题构建者将无法确保他们的页面在不同设备上的外观，但这并不是他们所做的全部。

由于将灵活的网格与 CSS 结合使用意味着您的所有样式和布局都保持在一起，因此与将它们放置在整个主题的主要代码中相比，处理更新和持续维护要容易得多。

2.断点

简单来说，响应式主题的断点是主题布局应该更改的点。

文章在下面继续

例如，一些设计人员可能会决定设置许多断点，当用户对其网络浏览器的大小进行最小调整时，这些断点会改变网站的布局。 相比之下，其他人可能会决定只有在尺寸变化显着时才应更改布局，例如从桌面屏幕到智能手机。

这些断点由 CSS 媒体查询确定，这些特定命令告诉主题何时显示不同的布局。

@media（最大宽度：480px）{

。容器 {

宽度：100%；

}

}

例如，使用上面的媒体查询，主题开发人员可以指定当屏幕尺寸为 480 像素或更小时，布局缩减为单列。

作为最佳实践的一般规则，为每个网站设置至少三个或四个断点以确保它响应最常用的屏幕尺寸是一个明智的想法。

3. 流体图像

虽然灵活的网格系统决定了整体布局如何响应不同的屏幕尺寸，但您猜对了，流体图像对页面上的图片也有同样的作用。

文章在下面继续

与网格系统一样，流体图像由 CSS 处理，在这种情况下，它根据容器的百分比而不是固定宽度来确定图像大小。 因此，这些图像会自动调整到适合其显示屏幕的最佳尺寸和位置。

这种方法对设计人员和最终用户都有好处。

有了流畅的图像，主题开发人员就不必经历为不同的浏览器创建多种尺寸的图像以及设置在哪种屏幕尺寸上应该使用哪种图像的规则的费力过程。 相反，他们可以使用一张图片并通过 CSS 控制其响应速度。

同时，网站访问者享受更好的整体体验，确保图片不会妨碍重要信息或页面功能，如联系表格和号召性用语。

4.响应式排版

当然，不仅仅是您的图像需要调整以适应不同的屏幕尺寸； 你的文字也是。

毕竟，想象一下，如果您为移动优先而构建并使用适合 Android 和 iPhone 设备的字体大小。 当用户试图在台式机或笔记本电脑上访问您的站点时，很可能文本太小而无法正确阅读。

相反，如果你在桌面上使用固定的字体大小，那么对于移动设备来说太大了，会破坏用户体验。

出于这个原因，主题设计师需要依靠响应式排版，再次利用层叠样式表的力量来为每个屏幕尺寸指定最合适的字体和大小。

5.移动友好的导航

用户友好的导航是任何网站的典型组成部分，允许访问者在您的页面之间跳转以查找他们需要的信息或服务。

所以，很自然地，这是响应式主题设计者真正需要注意的事情。

您在桌面上查看的网站上看到的标准导航菜单在较小的屏幕上使用时通常会变得具有挑战性，通常会对流程中的整体设计和布局产生负面影响。

这就是为什么设计师通常转向所谓的“汉堡菜单”。

毫无疑问，您之前已经无数次见过“汉堡菜单”，即使您不知道它们的名称。 从本质上讲，这个术语指的是移动网站或应用程序上的三个破折号，它们类似于汉堡包的结构，点击后会显示对导航菜单的访问。

这些菜单是使用 HTML 的结构、CSS 的样式和位置以及 Javascript 的组合来实现基本交互的，因此菜单在点击时打开和关闭。

虽然网站所有者可以使用各种顶级移动菜单插件（例如 WP Mega Menu 或 WP Mobile Menu）来改进其主题菜单的样式和功能，但主题设计师通常会发现，在将完全优化的移动导航构建到他们的主题中时，他们会取得更大的成功首先。

6.优化按键设计

按钮是高质量响应式主题设计的一个经常被忽视但至关重要的方面。

在带有光标的台式计算机上，很容易非常精确地点击按钮。 在移动设备上，用户将使用他们的手指点击，这根本无法提供相同级别的准确性。

因此，可点击的元素，例如按钮和文本链接，都需要足够大。

Apple 为开发人员提供的综合人机界面指南指出，平均手指点击尺寸为 44px x 44px，这意味着主题创建者应创建至少该尺寸的按钮。

将响应式设计的关键特性付诸行动：为什么移动优先方法很重要

在设计和开发行业中有一句广为流传的格言，即任何新产品，无论是 WordPress 主题、软件还是自定义网站，都应该使用移动优先的方法进行设计。

换句话说，与其为更大的桌面屏幕构建和测试主题并在您开始时对其进行微调以确保它在智能手机上运行，​​不如从灵活的网格系统和断点开始并让移动用户体验成为您的首要任务优先事项。

92% 的用户通过智能设备访问网络，这种常识性方法可确保您从“开始”一词就满足许多访问者的需求。

并不是说这是优先考虑移动设计的唯一原因。

众所周知，为小屏幕设计比为大屏幕设计会带来更多挑战和可用性问题。 通过专注于移动，主题开发人员给自己带来了从一开始就防止大多数这些问题的优势，从而节省了以后返回并修复它们所需的时间。

尽管如此，响应式主题并不是唯一可以帮助改善小屏幕用户体验的东西。 有关更多有用的工具，请参阅我们的移动友好网站的最佳 WordPress 插件指南。