乐趣区

关于前端:一文学会使用-CSS-中的-min-max-clamp-以及它们的使用场景

jiezi

作者：Ahmad shaded
译者：前端小智
起源：sitepoint

点赞再看 ，微信搜寻【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

2020 年 4 月 8 日 ，Firefox 浏览器反对了 CSS 比拟函数（min()，max()，clamp()），这意味着当初所有支流浏览器都反对它们。这些 CSS 函数最大的作用就是能够为咱们提供动静布局和更灵便设计组件办法。

简略的这些元素次要用来设置元素尺寸，如容器大小，字体大小，内距，外距等等。在这篇文章中，我将用一些示例和大家一起来探讨这几个函数在理论中的应用，心愿能更好的帮忙大家了解它们。

兼容性

min 和 max 的反对状况：

clamp()的反对状况：

CSS 比拟函数

依据 CSS 标准，比拟函数 是对于比拟多个值并取其一的操作，咱们来钻研一下函数。

Min() 函数

min() 函数反对一个或多个表达式，每个表达式之间应用逗号分隔，而后以最小的表达式的值作为返回值，咱们能够应用 min() 为元素设置最大值。

思考上面的例子，咱们心愿元素的最大宽度为500px。

.element {width: min(50%, 500px);
}

浏览器须要在 (50%，500px) 取一个最小值，因为有个百分比，所以最终后果取决于视口宽度。如果50% 的计算值大于500px，那么就取 500px。

否则，如果 50% 计算值小于 500px，则50% 将用作宽度的值，假如视口的宽度是 900px，最终元素的宽度为 900px x 50% = 450px。

上面是一个交互的动画为了让大家更好的了解：

事例源码：https://codepen.io/shadeed/debug/f5e338c8a1c7cd29e382c72a5eb37e48/auth

Max() 函数

max()函数和 min() 函数语法相似，区别在于 max() 函数返回的是最大值，min()函数返回的是最小值。同样，咱们能够应用 man() 为元素设置最小值。

思考上面的例子，咱们心愿元素的最小宽度为500px。

.element {width: max(50%, 500px);
}

浏览器须要在 (50%，500px) 取一个最大值，因为有个百分比，所以最终后果取决于视口宽度。如果50% 的计算值小于500px，那么就取 500px。

否则，如果 50% 计算值大于 500px，则50% 将用作宽度的值，假如视口的宽度是 1150px，最终元素的宽度为 1150px x 50% = 575px。

事例源码：https://cdpn.io/shadeed/debug/cca927df45964fbe1a8342ad3ace6d71

Clamp() 函数

clamp()函数作用是返回一个区间范畴的值。语法如下：

clamp(MIN, VAL, MAX)

其中 MIN 示意最小值，VAL示意首选值，MAX示意最大值。意思是，如果 VAL 在MIN和 MAX 范畴之间，则应用 VAL 作为函数返回值；如果 VAL 大于 MAX，则应用MAX 作为返回值；如果 VAL 小于 MIN，则应用MIN 作为返回值。

clamp(MIN, VAL, MAX)实际上等同于max(MIN, min(VAL, MAX))。

思考上面的例子

.element {width: clamp(200px, 50%, 1000px);
}

假如咱们有一个元素，其最小宽度为200px，首选值为50%，最大值为1000px, 如下所示：

下面的计算过程是这样的：

  • 宽度永远不会低于200px
  • 内容两头首选值是 50%，只有在视口宽度大于400px 小于 2000px 时才无效
  • 宽度不会超过 1000px

事例源码：https://codepen.io/shadeed/pen/924419f15bfdcf0cd0103b0587524b0b?editors=0010

上下文很重要

计算值取决于上下文。可能是 %，em，rem，vw/vh。甚至百分比值也能够基于视口宽度（如果元素间接位于<body> 中），也能够基于其父元素。

数学表达式

值得一提的是，clamp() 函数也能够用于数学表达式，而不用借助于 calc()，如下代码所示：

.type {
  /* 强制字体大小放弃在 12px 到 100px 之间 */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

用例

侧边栏和主界面

通常，页面的侧边栏是固定的，主界面度是灵便的。如果视口足够大，咱们能够依据视口的大小动静减少侧边栏宽度，这里咱们能够应用 max() 函数为其设置最小宽度。

思考上面的示例:

.wrapper {display: flex;}

aside {flex-basis: max(30vw, 150px);
}

main {flex-grow: 1;}

如果视口大于 500px，则侧边栏的最小宽度为150px(500 * 30% = 150)。

事例源码：https://codepen.io/shadeed/pen/7f9558f31fdf60bc08c827817c10bf3a?editors=1100

题目字体大小

clamp()的一个很好的用例是用于题目。假如咱们心愿题目的最小大小为 16px，最大大小为50px。clamp() 函数将为咱们提供一个介于两者之间的值。

.title {font-size: clamp(16px, 5vw, 50px);
}

在这里应用 clamp() 是非常适合的，因为它确保了所应用的字体大小是可拜访的和易于浏览的。如果换做min()，那么就不能在小的视图中管制字体了。

.title {font-size: min(3vw, 24px); /* Not recommended, bad for accessibility */
}

在挪动端，字体大小很小。因而，不要对字体大小应用 min() 函数。当然，咱们也能够通过媒体查问来适配，然而这样就错过了一次应用 CSS 比拟函数 实战。

如前所述，能够在 max() 函数中嵌套 min() 来实现 clamp() 成果，该函数将模拟clamp() 函数，如下所示：

.title {font-size: max(16px, min(10vw, 50px));
}

事例源码：https://codepen.io/shadeed/pen/db76480260c104df00c65991df90a203?editors=1100

装饰性题目

留神看上图题目上面有一个大的半透明的题目，这是一个装饰性的文本，依据视窗的大小来缩放。咱们能够应用 max() 函数和 CSS viewport 单元来设置它的最小值。

.section-title:before {content: attr(data-test);
  font-size: max(13vw, 50px);
}

源码: https://codepen.io/shadeed/pen/e0128b73de7c84cb9b98cf733a3835c4?editors=1100

平滑突变

当在 CSS 中应用突变时，你可能须要对它进行一些调整，使色彩之间的过渡更加平滑。咱们先看看上面的突变：

.element {background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}

留神挪动的过渡是有一条比拟显著的线离开，这是不好的。咱们能够通过应用媒体查问来解决这个问题：

@media (max-width: 700px) {
    .element {background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
    }
}

有一种更加简洁的办法就是应用 min() 函数，如下 所示：

.element {background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}

事例源码：https://codepen.io/shadeed/pen/2c4bf2ded32f66390fdef13409be4a10?editors=1100

通明突变

当须要在图片上搁置文本时，咱们应该在图片上加层突变让文本更加可读。与上一个示例相似，突变大小应该在小视图和大视图之间有所不同。见下图：

.element {background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}

事例源码：https://codepen.io/shadeed/pen/babf1bfd4c85eeb1b6f9f549dd0fe602?editors=1100

容器宽度

如果有一个容器，它的宽度应该是它父容器的 80%，但不能超过780px，你会用什么? 通常，你应该会用max-width，如下所示：

.container {
    max-width: 780px;
    width: 80%;
}

这里应用 min() 函数也能够为元素设置最大值：

.container {max-width: min(80%, 780px);
}

事例源码：https://codepen.io/shadeed/pen/3d8b44709b04efdd7336fe91363e3d76?editors=1100

边界与暗影

在一些设计案例中，如果元素边框的宽度和弧度比拟大时，在挪动时应尽量减小。通过应用clamp()，咱们能够依据视窗宽度使其动静。

.element {
    box-shadow: 0 3px 10px 0 red;
    border: min(1vw, 10px) solid #468eef;
    border-radius: clamp(7px, 2vw, 20px);
    box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);
}

事例源码：https://codepen.io/shadeed/pen/7b5c7979e09573ca32150ebfc7f74a66?editors=1100

Grid Gap

在一个应用格调布局的界面上，如果咱们想依据视口大小来调整网格之间的间距，应用 clamp() 是很容易做到的：

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: clamp(1rem, 2vw, 24px);
}

事例源码：https://codepen.io/shadeed/pen/a14c7d9fcbbae84340a4f83833294f5b?editors=1100

如果在不兼容浏览器应用这些办法

与任何新的 CSS 函数一样，提供后退计划是很重要的。要实现这一点，咱们能够应用以下办法之一：

1. 手动增加回退计划

咱们能够在应用 比拟函数 之前加一个默认的形式，如下所示：

.hero {
    padding: 4rem 1rem;
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

反对的浏览器将疏忽第一个，不反对的将应用第一个padding。

应用 CSS @supports

咱们能够应用 @supports 检测浏览器是否反对 CSS 比拟函数，如下所示：

.hero {
    /* 默认值，用于不反对的浏览器 */
    padding: 4rem 1rem;
}

@supports (width: min(10px, 5vw)) {
   /* 用于反对的浏览器  */
  .hero {padding: clamp(2rem, 10vmax, 10rem) 1rem;
  }
}

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://heydesigner.com/every…

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。

退出移动版