无需媒体查询即可实现 3 列桌面到 1 列移动布局

Question

这里研究了一些问题，但它们并不能完全解决我正在寻找的问题。假设我有一个网站并且我想要。在桌面上我想要这个：这很容易。grid-template-columns:重复(3,33%)(基本上)但是，在移动设备上，我想要这个我遇到的情况发生在它翻转到单个列之前：我正在尝试clamp()、minmax()以及各种各样的东西，但没有任何东西能按我想要的方式工作。是的，我完全可以使用媒体查询，但我希望使用现代

P粉070918777 · Answer

^{包含更通用规则的完整文章：https:// css-tricks.com/responsive-layouts-fewer-media-queries/}

这是一个在 flex-basis 中使用 max(0px, (400px - 100vw)*1000) 的想法。如果 100vw（屏幕尺寸）大于 400px，则此公式将给出 0px，或者在相反情况下给出一个非常大的值，为每个元素提供一个big flex-basis 并创建一个包装。只需调整 400px 即可扮演 @media (max-width:400px)

.container {
  display:flex;
  flex-wrap:wrap;
}

.container div {
  height:100px;
  border:2px solid;
  background:red;
  flex-basis:max(0px, (400px - 100vw)*1000);
  flex-grow:1;
}

使用 CSS 网格，它可以如下所示：

.container {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(30%, (400px - 100vw)*1000, 100%),1fr));
  grid-gap:5px;
}

.container div {
  height:100px;
  border:2px solid;
  background:red;
}

一个类似的问题，我控制没有媒体查询的最大列数：CSS网格 - 没有媒体查询的最大列数

我们可以扩展上述解决方案以考虑更复杂的情况。

从 6 列移动到 3 列到 1 列的示例：

.container {
  display:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(15%,(800px - 100vw)*1000, 30%), (400px - 100vw)*1000, 100%)
      /* if(screen> 800px) 15% elseif(screen> 400px) 30% else 100% */
      ,1fr));
  grid-gap:5px;
}

.container div {
  height:100px;
  border:2px solid;
  background:red;
}

要了解这些值，请考虑以下范围：

100%/7  100%/6  100%/5  100%/4  100%/3  100%/2  100%/1
 14.3%  16.7%    20%     25%     33.3%   50%     100%

要获得 6 列，我们需要 ]14.3% 16.7%] 范围内的值（我考虑的是 15%）要获得 3 列，我们需要 ]25% 33.3%] 范围内的值（我考虑的是 30%）

我们只是避开边缘以确保我们考虑到间隙。

使用 CSS 变量的更通用的解决方案，其中我将添加 0.1% 以确保该值足够大以获得所需的列数并且可以容纳间隙。

我们还添加一些动态着色（相关：如何根据

元素的高度或宽度更改其颜色？)

.container {
  /* first breakpoint*/
  --w1:800px;
  --n1:6;
  /* second breakpoint*/
  --w2:400px;
  --n2:3;

  display:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(100%/(var(--n1) + 1) + 0.1%, (var(--w1) - 100vw)*1000,
                         100%/(var(--n2) + 1) + 0.1%), (var(--w2) - 100vw)*1000,
                         100%), 1fr));
  grid-gap:5px;
  margin:10px 0;
}

.container div {
  height:100px;
  border:2px solid;
  background:
    linear-gradient(blue  0 0) 0 /1% calc(var(--w2) - 100vw),
    linear-gradient(green 0 0) 0 /1% calc(var(--w1) - 100vw),
    red;
}

使用 flexbox，我们可以有不同的（可能是想要的）行为，其中一行的最后一项将占用所有可用空间：

.container {
  /* first breakpoint*/
  --w1:800px;
  --n1:6;
  /* second breakpoint*/
  --w2:400px;
  --n2:3;

  display:flex;
  flex-wrap:wrap;
  margin:10px 0;
}

.container div {
  height:100px;
  border:2px solid;
  margin:5px;
  flex-basis:clamp(clamp(100%/(var(--n1) + 1) + 0.1% ,(var(--w1) - 100vw)*1000, 
                         100%/(var(--n2) + 1) + 0.1%),(var(--w2) - 100vw)*1000, 
                         100%);
  flex-grow:1;
  box-sizing:border-box;
  background:
    linear-gradient(blue  0 0) 0 /1% calc(var(--w2) - 100vw),
    linear-gradient(green 0 0) 0 /1% calc(var(--w1) - 100vw),
    red;
}