响应容器
插件描述
CSS媒体查询让我们根据屏幕大小设置元素样式。如果我们想根据容器的大小来设置它们，该怎么办？如果小部件或块在列或侧边栏中的全宽或约束，通常应该看起来不同，但是我们没有任何方法可以根据它们的屏幕宽度来编写容器查询来设置这些元素的样式＆hellip ;到现在！
此插件加载一个小型JavaScript文件，该文件根据这些元素在浏览器中的宽度有条件地将类应用于元素。其他主题和插件可以使用它来为编辑器块或窗口小部件编写特定于容器的样式，这样它们就可以在页面中的任何位置正确显示。
该脚本适用于前端和块编辑器 – 在您编写帖子时查看您的响应式样式，并相信您的小部件和块看起来是最好的，无论它们是全宽还是在最狭窄的边栏。
用法
如果您希望将站点中的块或窗口小部件用作响应容器，请将 data-responsive-container 属性添加到该块的容器元素。例如，父＆lt; div＆gt;日历块的可能如下所示：
＆lt; div class =“calendar-block”data-responsive-container＆gt;
通过添加该数据属性而已，您的容器现在将根据它们显示的大小标记其他类：
– 如果容器低于420px，则无特殊类（样式对于这个狭窄的上下文作为默认值）。
– container-sm 如果包含er为420px宽或更大，
– container-md 如果宽度大于600px，
– container-lg 如果宽度大于720px，则
> – container-xl 适用于任何960px或更宽的元素。
这些是默认值，因此有些随意，因此您还可以使用 data-responsive-container 属性提供自己的自定义主题或插件特定的断点值。在PHP中渲染元素或块时，传递一个类名和最小宽度的数组，应该应用每个类。这些类名称可以是默认的 .container- * 类，也可以是特定于被样式化的元素：
echo sprintf（'＆lt; div class = “myblock”data-responsive-container =“％s”＆gt;'，esc_attr（wp_json_encode（['myblock - 2-column'=＆gt; 600，'myblock-3-column'=＆gt; 900，]） ）;
在此示例中，您的容器将从600px向上接收 .myblock - 2列类，并且 .myblock - 3列大于或等于900px。
请注意，在这种情况下， .myblock 元素不会接收600px以下的自定义类。我们不会应用低于指定最小值的任何类名，因为我们假设样式写的是窄上下文优先，但是你可以通过提供 0 的最小宽度来确保你的最小类被应用：
echo sprintf（'＆lt; div class = “myblock”data-responsive-container =“％s”＆gt;'，esc_a ttr（wp_json_encode（['myblock - 1-column'=＆gt; 0，//适用于所有情况。 'myblock - 2-column'=＆gt; 600，'myblock - 3-column'=＆gt; 900，]））;
从WordPress
访问’插件＆gt;添加New’Search for’Responsive Containers’Activat来自插件页面的Responsive Containers插件。在主题或插件中使用 data-responsive-container 属性启动。
手动
将 responsive-containers 文件夹上传到 / wp-content / plugins / 目录从“插件”页面激活“响应容器”插件。使用数据启动主题或插件中的-responsive-container 属性。
许可证＆amp;归因
此插件根据 GNU通用公共许可证（或“GPL”）的条款获得许可。这是免费软件;您可以根据自由软件基金会发布的GNU通用公共许可证的条款重新分发和/或修改它;许可证的第2版，或（根据您的选择）任何更高版本。
它是由K. Adam White在 Human Made 创建的，基于 Philip Walton 推广的概念。
此插件使用Denis Rul的 resize-observer-polyfill 库，根据MIT许可证发布并复制; 2016 Denis Rul。
常见问题
这是如何运作的？
Responsive Containers插件实现了一种方法，该方法由 Philip Walton的优秀文章响应组件：容器查询问题的解决方案 推广。这个插件所做的是将他的解决方案应用于WordPress网站，这样，假设安装了此插件，任何其他插件或主题都可以选择响应容器样式。
在引擎盖下，这一切都由 ResizeObserver 驱动，这是一种有效检测元素大小变化的新浏览器功能。我们使用此方法跟踪页面上特定容器的大小，并根据它们在屏幕上显示的大小将一组类应用于这些元素。
我激活此插件并且没有任何更改
安装和激活此插件不会改变您网站的任何内容。您必须更新主题或插件，才能将 data-responsive-containers HTML属性添加到您希望用作响应容器的任何元素。
RSS