一次性搞懂css中的clamp函数，max函数，min函数，vmax，vmin

2024-06-03 14:06:12

1.clamp函数

2020年4月开始支持这些函数，我们来看MDN上对clamp函数的描述：是将一个值限制在一个上限和下限之间，当这个值超过最大或最小范围时，会在这两个值中选一个使用，它接收三个参数：最小值，首选值，最大值。表达式可以是数学函数 (参看 calc )、字面量或其它计算为有效的参数类型表达式，如 attr()，或嵌套的 min 和 max 。表达式中的每一个值都可以用不同的单位。

2.简单案例

font-size: clamp(1rem, 2.5vw, 2rem);

上述案例设置随窗口大小改变的字体大小，但是无论窗口怎么改变，字体大小不会小于设置的最小值，也不会超过设置的最大值。

3.和百分比，媒体查询区别

媒体查询形成流体尺寸，百分比没法最大值和最小值

clamp函数既能形成流体尺寸，也能有最大值最小值

4.min()和max()

min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。

width: min(10vw, 4em, 80px);

在上面的例子中，宽度最多是 80px。如果视口的宽度小于 800px，或者一个 em 的宽度小于 20px，则会更窄。换句话说，最大宽度是 80px。同理max() 这个 CSS 函数让你可以从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值 .

5.vmax，vmin

vmax，vmin是相对长度单位,vmin视口高度 vw和宽度 vh 两者之间的最小值。vmax视口高度 vw 和宽度 vh 两者之间的最大值。用途还是多，如手机屏幕翻转，每次都用vw或vh中的最小值，这样就算屏幕翻转也能最大效果的呈现画面，可以参考哔站手机版。

一次性搞懂css中的clamp函数，max函数，min函数，vmax，vmin相关推荐

html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
一文搞懂css中精灵图如何使用
文章目录前言一.精灵图是什么? 1.概念: 2.图片示例: 二.为什么使用精灵图? 1.用户体验而言: 2.就开发者而言: 3.就服务器而言: 三.怎样使用精灵图 1.background-pos ...
一次性搞懂 PHP 中面向对象的所有知识点。
OOP是什么? OOP是面向对象编程,面向对象编程是一种计算机编程架构. OOP的基本原则是计算机程序是由单个能起到子程序作用的单元或对象组合而成. 基本概念: 类:定义了事务的抽象特点.包含了数据的 ...
python内置函数中的zip，max，min函数例子
一:zip函数 print(list(zip(('a','b','c'),('1','2','3')))) print(list(zip(('a','b'),('1','2','3')))) prin ...
python min函数时间复杂度_作为Python程序员，你真的会用max()和min()函数吗？
在Python的七十多个内置函数中,max()和min()是比较常用的两个,用来查找一组数据中的最大值和最小值.这两个函数看似简单,实则暗藏了很多意想不到的功能,尤其是key参数,更为这两个函数增加了 ...
彻底搞懂javascript中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...
来一轮带注释的demo，彻底搞懂javascript中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...
HTTP 的前世今生：一次性搞懂 HTTP、HTTPS、SPDY、HTTP2.0
作为互联网通信协议的一员老将,HTTP 协议走到今天已经经历了三次版本的变动,现在最新的版本是 HTTP2.0,相信大家早已耳熟能详.今天就给大家好好介绍一下 HTTP 的前世今生. HTTP/0.9 ...
一次性搞懂 HTTP、HTTPS、SPDY、HTTP2
本篇文章给大家带来的内容是关于一次性搞懂 HTTP.HTTPS.SPDY.HTTP2,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 作为互联网通信协议的一员老将,HTTP 协议走到今 ...
彻底搞懂 JS 中 this 机制
彻底搞懂 JS 中 this 机制摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...

最新文章

热门文章