如何使应用程序块响应在线商店2.0欧宝体育官网入口首页

在Shopify Unite 2021我们宣布主题应用程序扩展为开发人员，允许你将应用扩展到商家的主题中应用程序块．主题应用程序扩展完全改变了商家与您的应用程序在其店面上的互动方式。

应用程序块还彻底改变了应用程序包含在主题中的方式。在页面中注入内联内容的应用程序现在可以使用应用程序块扩展主题。这意味着应用程序开发人员可以构建UI组件，这些组件可以由商家通过主题编辑器添加、删除和配置。

商家可以将应用程序块添加到兼容的主题部分或包装在平台提供的部分中。这些部分可以是全宽的，固定大小的，旁边或包含其他内容。这意味着应用程序块需要对其所添加的包含部分的大小做出响应。

以下面的例子为例，客户评论应用的应用块可以添加到产品详细信息部分的内部或下方。当添加到下面时，该块可以利用额外的空间并在右侧显示星级评级。但是，如果将其添加到产品详细信息部分，则评论标题旁边就没有空间提供星级评价。我们希望改变布局，使其在标题下方呈现。

应用程序块需要在各种不同的主题、模板和部分中工作，所以考虑应用程序块对这些不同环境的适应性是很重要的。

“应用程序块需要在各种不同的主题、模板和部分中工作，所以考虑应用程序块对这些不同环境的适应性是很重要的。”

在本文中，我们将介绍使您的应用程序块具有响应性的最佳实践。

浏览器的限制

在我们讨论如何让你的应用程序块响应之前，让我们快速看看响应式网页设计的标准解决方案，以及为什么它们在这种特殊情况下不起作用。

媒体查询

当你想到响应式网页设计时，你可能会想到媒体查询．媒体查询允许我们根据设备和浏览器的属性来应用CSS，最常见的是视口大小。例如，你可以使用媒体查询在移动端和桌面端呈现不同的网站。

然而，在我们的用例中，视口大小并不是决定UI响应性的因素——相反，它是包含标记的大小。这是因为应用程序块总是被添加到主题提供的部分中，因此不知道其周围的元素和内容。如果我们使用媒体查询，应用程序块可能会认为它有很大的空间可以占用，而实际上它与其他元素聚集在一起。

注意:这并不意味着媒体查询在开发你的应用程序块时没有用处。媒体查询在为不同的设备调整UI和控制布局时仍然很重要。

集装箱查询

集装箱查询解决这些问题．对于使用过媒体查询的开发人员来说，建议的语法非常熟悉:

但事实并非如此浏览器支持(!)。

Chrome确实在Chrome金丝雀(Chrome Canary)的功能标志后面实现了此语法(chrome: / /旗帜)，但它是仍在提议中．目前还没有明确的迹象表明Firefox或Safari是否计划采用这种语法。这意味着它还不能被视为标准，而且语法将来可能会改变。

人们对容器查询的兴趣越来越大，所以我们可能很快就会看到解决方案。然而，在浏览器广泛支持它之前，我们需要找到一个临时解决方案。

输入CSS grid和CSS functions

虽然它可能不是最优雅的解决方案，也不能解决所有与容器查询相同的用例，但我们可以使用浏览器中已经广泛支持的工具来实现容器级布局响应。

在文章中灵活的布局没有媒体查询， Dannie Vinther介绍了使用CSS网格和CSS数学函数组成解决方案的组件。我们将介绍一般方法以及如何将其应用于下面的应用程序块。

有几个不同的CSS特性组合在一起形成了这个解决方案，所以让我们更详细地介绍它们。

min ()，max (),夹()

此解决方案的关键部分是能够根据特定标准动态更改值。这就是min ()，max (),夹()可以帮助我们。

min ()

顾名思义，min ()将从传入的值返回最小值。

.child {
宽度:min(100vw, 200px);
}

在上面的例子中，如果视口大于200px，那么元素的宽度将为200px，但如果视口小于200px，它将采用视口的宽度。

max ()

max ()将返回传入值的最大值。

.child {
宽度:max(50vw, 200px);
}

在上面的例子中，如果视口大于400px，那么元素的宽度将是视口的50%(因为超过400px的视口的50%大于200px)，但如果视口小于400px，它将是200px。

夹()

如果您希望返回一个在最大值和最小值范围内的值，那么您可以将上述两个函数结合使用。或者，有一个方便的函数来实现这一点夹()，这需要最低值,首选价值,最大价值。

.child {
宽度:max(50vw, min(200px, 100vw));//相当于下面的clamp()
宽度:钳形(50vw, 200px, 100vw);
}

在上面的例子中，宽度永远不会小于200px。

单位

这些CSS函数非常简单，但是在上面的例子中我们使用了大众单位，相当于视口宽度。这解决了媒体查询已经帮助解决的一个类似问题。对于我们的应用块用例，我们想要计算相对于父元素。幸运的是，我们可以用百分比单位来做。

.child {
宽度:clamp(50%， 200px, 100%);
}

CSS网格

上面的CSS函数允许我们获得相对于父容器的特定值。但是我们如何使用这些来布局我们的应用程序块呢?一种方法是CSS网格．

CSS网格已经成为在网页上布局元素的流行方式，简化了许多常见的用例。在过去，我们使用表格、浮动、内联块，以及最近的Flexbox来帮助布局网页。虽然Flexbox仍然有自己的用例，但CSS网格的优势在于它是一个基于二维网格的布局系统，这意味着开发人员可以更好地控制。

要深入了解CSS网格的特性，我们建议查看网格的完整指南在css技巧。对于这篇文章，需要考虑的重要方面是网格由两部分组成:网格容器和网格项。

• 网格容器:具有显示:网格应用
• 电网项目:网格容器的直接子元素

由于本文的缘故，我们将主要关注可以应用于网格容器的属性和值。让我们看一个例子来理解我们如何使用CSS函数来控制CSS网格布局。

我们可以在这里看到夹子CSS函数的作用，但是还有许多其他CSS网格特定的方面会使它变得压倒性。让我们分别来解决这些问题:

• 显示:网格:这告诉元素我们想要使用CSS网格来布局这个元素和它的子元素
• grid-template-columns:这定义了网格列的大小
• 重复:允许重复的大小值grid-template-columns和grid-template-rows属性。例如，您可能需要第一个N一个尺码，最后一个尺码不同。auto-fit告诉浏览器为我们处理列的大小和元素的换行，这样当宽度不够大的时候元素就会换行而不会溢出。
• 极大极小这需要时间。最小值Value和a马克斯价值。然后定义一个大于或等于min且小于或等于max的大小范围。它只在CSS网格中可用。1 fr上面的代码告诉浏览器在两列之间分配空间，这样每一列都能得到该空间的一小部分。

要更深入地了解CSS网格中的自动调整大小，请查看Sara Soueidan的文章自动调整CSS网格中的列大小自动vsauto-fit．

把所有这些放在一起，我们告诉浏览器使用CSS网格来布局元素的项目和使用auto-fit旁边一个极大极小()让浏览器根据夹()计算何时“中断”列数并创建动态响应网格是合适的。

限制

当然，如果CSS网格和CSS函数解决了所有响应性容器问题，那么我们就不需要容器查询了，但事实并非如此。这种方法对基于父容器的大小所能更改的内容有一些限制。

具体来说，这个解决方案:

• 不允许显示或隐藏特定的元素
• 不允许修改非基于大小的属性

尽管存在这些限制，但使用CSS网格和CSS函数，我们可以确保应用程序块足够动态，无论它们添加到页面上的哪个位置都看起来很棒。

使用CSS构建响应式应用程序块

主题应用扩展和应用程序块带来很多令人兴奋的机会。有了它们，商家就可以完全控制将应用块添加到店面的位置。这意味着开发者需要预测商家如何使用应用程序块，并确保它们看起来很好，运行良好。在容器查询得到更好的支持之前，CSS网格和CSS函数提供了一个不错的临时解决方案。