@ cssints/ fluid (英语)
流体长度 点缀数字 : fluid(min, max) 长度是 min 在一个狭窄的视线上, max 编号
宽一, 并线性地生长在之间。 这个 clamp() 在构建时计算,并打破文本调整大小的区域
(WCAG 1.4.4) 建设失败. 两个价值的成员 cssints/plugin scope() (单位:千美元)fn({ args, value })位置
参数和一个选项对象)。 没有运行时间.
import { fontSize, padding } from "cssints" with { type: "cssints" };
import { fluid } from "@cssints/fluid" with { type: "cssints" };
// fluid(min, max, { from?, to?, zoom? }): from and to are the widths, 20rem and 80rem when left out
export const title = fontSize(fluid("1rem", "1.5rem"));
export const lead = fontSize(fluid("16px", "24px", { from: "40rem", to: "90rem" }));
// against the inline size of the nearest container instead of the viewport
export const card = padding(fluid.container("1rem", "2rem", { to: "60rem" }));
export const hero = fontSize(fluid("1rem", "4rem")); // build error: fails WCAG 1.4.4
._bkcdcr {
font-size: clamp(1rem, 0.8333vw + 0.8333rem, 1.5rem);
}
._1wkr2lu {
font-size: clamp(16px, 1vw + 0.6rem, 24px);
}
._ekb8uj {
padding: clamp(1rem, 2.5cqi + 0.5rem, 2rem);
}
规则
- 数学. 斜道是
(max - min) / (to - from)和拦截min - slope × from,写入clamp(min, <slope × 100>vw + <intercept>rem, max),四舍五入到小数点后四位数。 拦截是雷姆的,所以数值如下 用户字体大小。 A 类max下级min生成一个缩小的值:clamp()山坡是 负. - 单位.
min, (中文(简体) ),max, (中文(简体) ),from财务报告和审定财务报表to是 px 或 rem, 在 16px 到 rem; 界限保留您所写的单位 。 其它 单位(em, (中文(简体) ),vw, (中文(简体) ),%, (中文(简体) ),calc()在构建时无法计算:构建拒绝(类型检查a) 非负数<length>,而语法不能命名单位). - WCAG 1.4.4. (中文(简体) ). 检查 流体尾风: 以500 % 缩放
第5个宽度和rem大值的5倍,值必须在100%时达到其大小的两倍,或者文本不能是
调整为200%。 检查每个宽度(在两个曲线的4个折痕上),失败是构造错误
命名宽度的呼叫 :
cssints: fluid: 1rem to 4rem between 20rem and 80rem fails WCAG 1.4.4: at 80rem wide, 500% zoom gives 5rem, under twice 4rem; narrow the range of sizes or widen the widths比率max改为min最多 约2.5次通过带有默认宽度. - 长一丈. 结果是打入了 OM 长度 (
CSSStyleValue<"length">它去一个长度的地方,在类型上, 财务报告和审定财务报表color(fluid(...))是一个错误。 这可能是一个论点clamp(), (中文(简体) ),min()财务报告和审定财务报表max()来点心. - 构建错误 (在呼叫中):非px或rem的单位,
min等于max, (中文(简体) ),from未低于to,失败 1.4.4 检查和论点的语法,按立场分列fluid.container(2): unexpected "red" in "red", expected <length>) (中文(简体) ).
限制
- 1.4.4 检查每一次通话,除非
{ zoom: false }的长度(a) padding, 一个缺口 :padding(fluid("1rem", "4rem", { zoom: false }))。 。 。 . fluid.container()使用与容器宽度相同的检查取而代之的取景所,取景所的取景所 带有取景口的容器天平.- 没有默认的符号集, 没有符号作为参数: 符号是
var(),建筑无法计算.
cd packages/fluid && bun run test # fixtures through the engine (output, errors), and the type test via bun run typecheck
贷项
WCAG 1.4.4 检查如下: 流体尾风 (MIT, Maxwell Barvian) (英语). 支票在此被写入; 没有复制代码 .