使用 CSS Clamp 创建更灵活的包装器实用程序

我喜欢 Andy 的想法

.wrapper {
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

通常我会在那里设置一个 max-width，但正如 Andy 所说

这在中等大小的视口中会成为一个小问题，例如纵向模式下的平板电脑，在长篇内容中，例如本文，因为在上下文中，行长感觉非常长。

因此，在超大屏幕上，您将限制在 70rem（或您认为合适的最大值），在小屏幕上，您将获得全宽，这很好。但那些介于两者之间的情况不太好。我制作了一个小演示来感受一下。我认为这段视频说明得很清楚

直接链接 →

Michael Cohen

# 2021年2月17日

抱歉要当“那个家伙”，但这与设置 min-width: 16rem; width: 90vw; max-width: 70rem;有什么区别？至少在过去十年里我一直在这样做（不包括 min-width，它似乎在灵活内容中并不是一个好主意）。

Mike Mai

# 2021年2月17日

我不喜欢传统的 max-width 包装器。我更喜欢只用填充来计算，这样我也可以获得使用背景颜色和背景图像的好处。

:root {
  --page-padding-x: calc(
    (100vw - min(80vw, 75ch)) / 2
  );
}

.section {
  padding-right: var(--page-padding-x);
  padding-left: var(--page-padding-x);
}

Andreas Lagerkvist

# 2021年2月19日

我做的几乎一样；

:root {
    --site-width-min: 85vw;
    --site-width-max: 1080px;
    --site-width: var(--site-width-min);
    --site-padding: calc((100vw - var(--site-width)) / 2);
}

@supports (padding: min(10%, 100px)) {
    :root {
        --site-width: min(var(--site-width-min), var(--site-width-max));
        --site-padding: calc((100vw - var(--site-width)) / 2);
    }
}

.section {
    padding: var(--spacing-x-large) var(--site-padding);
}

.container {
    width: var(--site-width);
    margin: var(--spacing-x-large) auto;
}

Arkay

# 2021年2月18日

也不是要当“那个家伙”。但是，轻视 CSS 中的新工具是我们让一群疲惫的恐龙在 Flexbox 工作得很好时抱怨浮动的原因。

Ed Murphy

评论永久链接# 2021年12月28日

从来没有人说过浮动工作得很好。表格，也许。

Will

# 2021年2月19日

我觉得每次我来到这里，最终都会学到另一种做已经可以工作的事情的方法，没有任何实际好处。

老实说，当我们需要响应式网页设计时，没有比 Bootstrap 的网格系统更好的替代方案了。

Geoff Graham

评论永久链接# 2021年2月19日

没有比 Bootstrap 的网格系统更好的替代方案了。

我很乐意让你详细说明这一点。同时，我认为你错过了这里的大局。CSS 正在为我们提供新的实用程序，使我们能够更精细地控制响应式设计——在某种程度上，媒体查询现在只是工具箱中的另一种工具。

那么，clamp() 比 max-width 好吗？我不知道。这取决于它的用途。在这种情况下，它可以作为一个非常好的包装器实用程序，使我们能够以 max-width 无法实现的方式强制使用一系列值。

它比 Bootstrap 的网格系统更好吗？同样，我不知道。但将它们等同起来是一个坏主意，因为 clamp() 的设计并非像 Bootstrap 那样成为一个系统或框架。

Christian Rau

# 2021年2月23日

一个很棒的例子 -(s) 也在评论中！

与 max-width 示例相比，在小屏幕尺寸上文本换行似乎存在问题。

如何避免文本被截断？

Nicolas Hoizey

# 2022年1月31日

我不明白。它怎么会比这个更好？

width: 80vw;
max-width: 60rem;

至少，此版本在小于 320px/16rem 的视口中不会出现水平滚动。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。