We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
早上刷推看到的一个图
计算表达式的值中最小的值作为参数值
类似 JS 中的 Math.min()
JS
Math.min()
示例
width: min(50vw, 500px);
表示元素最大宽为 500px，即：小屏设备上宽度为 window 的一半，但在小屏设备上，不超过 500px
500px
window
计算表达式的值中最大的值作为参数值，用法和 min 一致
min
返回一个区间范围的值
语法: clamp(MIN, VAL, MAX)，MIN 表示最小值，VAL 表示首选值，MAX 表示最大值，即 VAL 在 MIN MAX 之间就用 VAL，比 MIN 小就用 MIN ，比 MAX 大就用 MAX
clamp(MIN, VAL, MAX)
MIN
表示最小值，VAL
MAX
VAL
MIN MAX
等同于 max(MIN, min(VAL, MAX))
max(MIN, min(VAL, MAX))
min() max() clamp() 这三哥们都是比较新的属性，兼容性都不咋地，仅用于个人玩具
min() max() clamp()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <style> .min { /* width: min(20px, 30px, 40px); */ width: min(2rem, 15vw); height: 100px; font-size: min(16px, 10vw); line-height: min(16px, 10vw); background: forestgreen; } .max { width: max(2rem, 15vw); height: 100px; font-size: max(16px, 10vw); line-height: max(16px, 10vw); background: red; } .clamp { width: clamp(2rem, 40px, 15vw); height: 100px; background: blue; } .min-calc { width: max(calc(100vw - 20px - 3rem - 20vh), 40px); height: 100px; background: orange; } </style> </head> <body> <div class="min">min</div> <div class="max">max</div> <div class="clamp">clamp</div> <div class="min-calc">min calc</div> </body> </html>
demo
width: max(50vw, 500px);
width: clamp(10px, 1em, 20px);
CSS
width: calc(100% - 100px);
HTML
a:before { content:attr(data-name); }
color: rgb(123, 123, 123);
rgb
color: rgba(123, 123, 123, 0.23);
color: hsl(120, 100%, 75%);
hsl
color: hsla(120, 100%, 75%, 0.5);
background: url('img.png');
background-image: linear-gradient(45deg, blue, red);
background-image: linear-gradient(to left top, blue, red);
background-image: radial-gradient(circle, red, yellow, green);
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
width: var(--main-wdith);
The text was updated successfully, but these errors were encountered:
No branches or pull requests
CSS 函数
min()
计算表达式的值中最小的值作为参数值
类似
JS中的Math.min()示例
表示元素最大宽为
500px，即：小屏设备上宽度为window的一半，但在小屏设备上，不超过500pxmax()
计算表达式的值中最大的值作为参数值，用法和
min一致clamp()
返回一个区间范围的值
语法:
clamp(MIN, VAL, MAX)，MIN表示最小值，VAL表示首选值，MAX表示最大值，即VAL在MIN MAX之间就用VAL，比MIN小就用MIN，比MAX大就用MAX等同于
max(MIN, min(VAL, MAX))组合使用
min() max() clamp()这三哥们都是比较新的属性，兼容性都不咋地，仅用于个人玩具demo
顺便总结了下 CSS 的函数
数学函数
width: min(50vw, 500px);width: max(50vw, 500px);width: clamp(10px, 1em, 20px);CSS属性值时执行一些计算width: calc(100% - 100px);HTML属性值a:before { content:attr(data-name); }颜色函数
color: rgb(123, 123, 123);rgb的基础上增加了阿尔法通道（A）color: rgba(123, 123, 123, 0.23);color: hsl(120, 100%, 75%);hsl的基础上增加了阿尔法通道（A）color: hsla(120, 100%, 75%, 0.5);背景图函数
background: url('img.png');background-image: linear-gradient(45deg, blue, red);background-image: linear-gradient(to left top, blue, red);background-image: radial-gradient(circle, red, yellow, green);background-image: repeating-linear-gradient(red, yellow 10%, green 20%);background-image: repeating-radial-gradient(red, yellow 10%, green 15%);动画缓动函数
其他函数
width: var(--main-wdith);The text was updated successfully, but these errors were encountered: