响应迅速的布局，更少的媒体查询

响应式设计是现代网络开发的基石。长期以来，媒体查询一直是必不可少的，但是CSS的进步提供了可显着降低其依赖的技术。本文演示了如何使用最少甚至零的媒体查询来创建响应式布局，从而导致更清洁，更可维护的代码。

我们将探索Flexbox和基于网格的方法，以实现响应能力，而无需明确的媒体查询断点。

利用flexbox和flex-wrap

一个简单的示例使用flex: 400px为元素设置基本宽度。当空间不足时，项目包裹到新线路上。剩余空间分布在每条线上的元素之间。 flex: 400px是flex-grow: 1; flex-shrink: 1; flex-basis: 400px; 。

这种方法提供了简短的（两行代码），但缺乏对一致的页脚宽度，每行项目和包装行为的细粒度控制。

使用CSS网格使用auto-fit和minmax

CSS网格使用repeat(auto-fit, minmax(400px, 1fr))提供了类似的基本宽度，并具有包装行为。元素生长以填充可用的空间，并保持跨行的一致宽度。但是，项目不能低于400px，可能导致溢出。

每行控制项目

精炼Flexbox方法，我们替换flex: 400px用flex: max(400px, (100% - 20px)/3); 。这将每一行最多限制在三个项目中。 20px占两个差距（假设​​项目之间存在10px差距）。更广泛的公式max(400px, 100%/(N 1) 0.1%) ，消除了对显式差距计算的需求，其中n代表每行的最大项目数。这提供了对每行项目的部分控制。相同的原理适用于CSS网格。

确保物品成长和收缩

为了通过网格方法解决溢出问题，我们使用clamp(100%/(N 1) 0.1%, 400px, 100%) 。这样可以确保物品生长以填补可用空间，但永远不会超过容器宽度。

精确控制包装

要控制项目包裹时，我们将clamp()公式修改为： clamp(100%/(N 1) 0.1%, (400px - 100vw)*1000, 100%) 。当屏幕宽度（100VW）超过400px时，我们每行n个项目。低于400px，我们每行获得一个全宽项目，有效地创建了一个无媒体查询的断点。 400px在这里充当断点。

处理多个断点

要管理多个项目计数之间的过渡（例如，从N到M项目），我们嵌套clamp()函数： clamp(clamp(100%/(N 1) 0.1%, (W1 - 100vw)*1000,100%/(M 1) 0.1%), (W2 - 100vw)*1000, 100%) 。 W1和W2代表断点。这允许通过单个CSS声明进行复杂的响应行为。进一步的嵌套将其扩展到更多的断点。

模拟容器查询

通过用100%替换100vw ，我们可以模拟容器查询，从而使布局响应容器的宽度而不是视口。

高级技术

除了列控制之外，我们还可以根据元素维度或屏幕大小创建条件样式。

条件背景颜色：使用线性梯度，我们可以根据元素宽度有条件地更改背景颜色：

 div {
  背景：线性级别（绿色0 0）0 / max（0px，100px -100％）1px，红色；
}

切换元素可见性：我们可以使用clamp()和overflow: hidden; 。

更改元素位置：我们可以使用clamp()基于屏幕尺寸动态调整元素位置（例如， top ， left ）。

结论

尽管媒体查询仍然有价值，但这些技术展示了如何以减少对它们的依赖而实现复杂的响应设计。重点不是完全消除媒体查询，而是在优化代码和利用CSS创建动态和响应式布局的功能上。这些策略提供了强大的控制和更清洁的代码，从而提高了可维护性和效率。

以上是响应迅速的布局，更少的媒体查询的详细内容。更多信息请关注PHP中文网其他相关文章！