CSS: responsive

[class*="-hidden-"],[class*="-show-"] — 在主题断点尺度上，按视口或容器宽度显示/隐藏的类。

.instui-hidden-max-<bp>/-hidden-min-<bp> 根据视口宽度隐藏；.instui-show-max-<bp>/-show-min-<bp> 则相反（默认隐藏，仅在范围内通过 display: revert 显示）；-cq- 变体改为响应 .instui-container 祖先的宽度，而不是视口。比例级别 xs/sm/md/lg/xl（来自 IR 的 tray-width 组件令牌）分别有长格式拼写别名（x-small–x-large）和设备名称（mobile/phablet/tablet/laptop/desktop）— 两者均已弃用，建议使用短名称 — 以及未缩放的主题化 content/content-full-width 级别（主内容区域的最大宽度）。

Source: index.ts

用法

@import "@pantoken/components/utilities.css";

示例

<div class="instui-hidden-max-sm">Hidden at or below the small breakpoint.</div>
<div class="instui-show-min-sm">Shown only at or above the small breakpoint.</div>

修饰符

修饰符	描述
.-cq-hidden-max-content	当标记的容器处于或小于 content 断点（68.75em）时隐藏。
.-cq-hidden-max-content-full-width	当标记的容器处于或小于 content-full-width 断点（98.75em）时隐藏。
.-cq-hidden-max-desktop	Alias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-laptop	Alias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-large	Alias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-lg	当标记的容器处于或小于 lg 断点（48em）时隐藏。
.-cq-hidden-max-md	当标记的容器处于或小于 md 断点（30em）时隐藏。
.-cq-hidden-max-medium	Alias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-mobile	Alias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-phablet	Alias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-sm	当标记的容器处于或小于 sm 断点（20em）时隐藏。
.-cq-hidden-max-small	Alias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-tablet	Alias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-x-large	Alias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-x-small	Alias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-xl	当标记的容器处于或小于 xl 断点（62em）时隐藏。
.-cq-hidden-max-xs	当标记的容器处于或小于 xs 断点（16em）时隐藏。
.-cq-hidden-min-content	当标记的容器处于或大于 content 断点（68.75em）时隐藏。
.-cq-hidden-min-content-full-width	当标记的容器处于或大于 content-full-width 断点（98.75em）时隐藏。
.-cq-hidden-min-desktop	Alias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-laptop	Alias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-large	Alias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-lg	当标记的容器处于或大于 lg 断点（48em）时隐藏。
.-cq-hidden-min-md	当标记的容器处于或大于 md 断点（30em）时隐藏。
.-cq-hidden-min-medium	Alias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-mobile	Alias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-phablet	Alias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-sm	当标记的容器处于或大于 sm 断点（20em）时隐藏。
.-cq-hidden-min-small	Alias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-tablet	Alias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-x-large	Alias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-x-small	Alias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-xl	当标记的容器处于或大于 xl 断点（62em）时隐藏。
.-cq-hidden-min-xs	当标记的容器处于或大于 xs 断点（16em）时隐藏。
.-cq-show-max-content	当标记的容器处于或小于 content 断点（68.75em）时显示；否则隐藏。
.-cq-show-max-content-full-width	当标记的容器处于或小于 content-full-width 断点（98.75em）时显示；否则隐藏。
.-cq-show-max-desktop	Alias — maps to .-cq-show-max-xl.
.-cq-show-max-laptop	Alias — maps to .-cq-show-max-lg.
.-cq-show-max-large	Alias — maps to .-cq-show-max-lg.
.-cq-show-max-lg	当标记的容器处于或小于 lg 断点（48em）时显示；否则隐藏。
.-cq-show-max-md	当标记的容器处于或小于 md 断点（30em）时显示；否则隐藏。
.-cq-show-max-medium	Alias — maps to .-cq-show-max-md.
.-cq-show-max-mobile	Alias — maps to .-cq-show-max-xs.
.-cq-show-max-phablet	Alias — maps to .-cq-show-max-sm.
.-cq-show-max-sm	当标记的容器处于或小于 sm 断点（20em）时显示；否则隐藏。
.-cq-show-max-small	Alias — maps to .-cq-show-max-sm.
.-cq-show-max-tablet	Alias — maps to .-cq-show-max-md.
.-cq-show-max-x-large	Alias — maps to .-cq-show-max-xl.
.-cq-show-max-x-small	Alias — maps to .-cq-show-max-xs.
.-cq-show-max-xl	当标记的容器处于或小于 xl 断点（62em）时显示；否则隐藏。
.-cq-show-max-xs	当标记的容器处于或小于 xs 断点（16em）时显示；否则隐藏。
.-cq-show-min-content	当标记的容器处于或大于 content 断点（68.75em）时显示；否则隐藏。
.-cq-show-min-content-full-width	当标记的容器处于或大于 content-full-width 断点（98.75em）时显示；否则隐藏。
.-cq-show-min-desktop	Alias — maps to .-cq-show-min-xl.
.-cq-show-min-laptop	Alias — maps to .-cq-show-min-lg.
.-cq-show-min-large	Alias — maps to .-cq-show-min-lg.
.-cq-show-min-lg	当标记的容器处于或大于 lg 断点（48em）时显示；否则隐藏。
.-cq-show-min-md	当标记的容器处于或大于 md 断点（30em）时显示；否则隐藏。
.-cq-show-min-medium	Alias — maps to .-cq-show-min-md.
.-cq-show-min-mobile	Alias — maps to .-cq-show-min-xs.
.-cq-show-min-phablet	Alias — maps to .-cq-show-min-sm.
.-cq-show-min-sm	当标记的容器处于或大于 sm 断点（20em）时显示；否则隐藏。
.-cq-show-min-small	Alias — maps to .-cq-show-min-sm.
.-cq-show-min-tablet	Alias — maps to .-cq-show-min-md.
.-cq-show-min-x-large	Alias — maps to .-cq-show-min-xl.
.-cq-show-min-x-small	Alias — maps to .-cq-show-min-xs.
.-cq-show-min-xl	当标记的容器处于或大于 xl 断点（62em）时显示；否则隐藏。
.-cq-show-min-xs	当标记的容器处于或大于 xs 断点（16em）时显示；否则隐藏。
.-hidden-max-content	当视口处于或小于 content 断点（68.75em）时隐藏。
.-hidden-max-content-full-width	当视口处于或小于 content-full-width 断点（98.75em）时隐藏。
.-hidden-max-desktop	Alias — maps to .-hidden-max-xl.
.-hidden-max-laptop	Alias — maps to .-hidden-max-lg.
.-hidden-max-large	Alias — maps to .-hidden-max-lg.
.-hidden-max-lg	当视口处于或小于 lg 断点（48em）时隐藏。
.-hidden-max-md	当视口处于或小于 md 断点（30em）时隐藏。
.-hidden-max-medium	Alias — maps to .-hidden-max-md.
.-hidden-max-mobile	Alias — maps to .-hidden-max-xs.
.-hidden-max-phablet	Alias — maps to .-hidden-max-sm.
.-hidden-max-sm	当视口处于或小于 sm 断点（20em）时隐藏。
.-hidden-max-small	Alias — maps to .-hidden-max-sm.
.-hidden-max-tablet	Alias — maps to .-hidden-max-md.
.-hidden-max-x-large	Alias — maps to .-hidden-max-xl.
.-hidden-max-x-small	Alias — maps to .-hidden-max-xs.
.-hidden-max-xl	当视口处于或小于 xl 断点（62em）时隐藏。
.-hidden-max-xs	当视口处于或小于 xs 断点（16em）时隐藏。
.-hidden-min-content	当视口处于或大于 content 断点（68.75em）时隐藏。
.-hidden-min-content-full-width	当视口处于或大于 content-full-width 断点（98.75em）时隐藏。
.-hidden-min-desktop	Alias — maps to .-hidden-min-xl.
.-hidden-min-laptop	Alias — maps to .-hidden-min-lg.
.-hidden-min-large	Alias — maps to .-hidden-min-lg.
.-hidden-min-lg	当视口处于或大于 lg 断点（48em）时隐藏。
.-hidden-min-md	当视口处于或高于 md 断点（30em）时隐藏。
.-hidden-min-medium	Alias — maps to .-hidden-min-md.
.-hidden-min-mobile	Alias — maps to .-hidden-min-xs.
.-hidden-min-phablet	Alias — maps to .-hidden-min-sm.
.-hidden-min-sm	当视口处于或高于 sm 断点（20em）时隐藏。
.-hidden-min-small	Alias — maps to .-hidden-min-sm.
.-hidden-min-tablet	Alias — maps to .-hidden-min-md.
.-hidden-min-x-large	Alias — maps to .-hidden-min-xl.
.-hidden-min-x-small	Alias — maps to .-hidden-min-xs.
.-hidden-min-xl	当视口处于或高于 xl 断点（62em）时隐藏。
.-hidden-min-xs	当视口处于或高于 xs 断点（16em）时隐藏。
.-show-max-content	当视口处于或低于 content 断点（68.75em）时显示（与 -hidden-min-content 相反）；否则隐藏。
.-show-max-content-full-width	当视口处于或低于 content-full-width 断点（98.75em）时显示（与 -hidden-min-content-full-width 相反）；否则隐藏。
.-show-max-desktop	Alias — maps to .-show-max-xl.
.-show-max-laptop	Alias — maps to .-show-max-lg.
.-show-max-large	Alias — maps to .-show-max-lg.
.-show-max-lg	当视口处于或低于 lg 断点（48em）时显示（与 -hidden-min-lg 相反）；否则隐藏。
.-show-max-md	当视口处于或低于 md 断点（30em）时显示（与 -hidden-min-md 相反）；否则隐藏。
.-show-max-medium	Alias — maps to .-show-max-md.
.-show-max-mobile	Alias — maps to .-show-max-xs.
.-show-max-phablet	Alias — maps to .-show-max-sm.
.-show-max-sm	当视口处于或低于 sm 断点（20em）时显示（与 -hidden-min-sm 相反）；否则隐藏。
.-show-max-small	Alias — maps to .-show-max-sm.
.-show-max-tablet	Alias — maps to .-show-max-md.
.-show-max-x-large	Alias — maps to .-show-max-xl.
.-show-max-x-small	Alias — maps to .-show-max-xs.
.-show-max-xl	当视口处于或低于 xl 断点（62em）时显示（与 -hidden-min-xl 相反）；否则隐藏。
.-show-max-xs	当视口处于或低于 xs 断点（16em）时显示（与 -hidden-min-xs 相反）；否则隐藏。
.-show-min-content	当视口处于或高于 content 断点（68.75em）时显示（与 -hidden-max-content 相反）；否则隐藏。
.-show-min-content-full-width	当视口处于或高于 content-full-width 断点（98.75em）时显示（与 -hidden-max-content-full-width 相反）；否则隐藏。
.-show-min-desktop	Alias — maps to .-show-min-xl.
.-show-min-laptop	Alias — maps to .-show-min-lg.
.-show-min-large	Alias — maps to .-show-min-lg.
.-show-min-lg	当视口处于或高于 lg 断点（48em）时显示（与 -hidden-max-lg 相反）；否则隐藏。
.-show-min-md	当视口处于或高于 md 断点（30em）时显示（与 -hidden-max-md 相反）；否则隐藏。
.-show-min-medium	Alias — maps to .-show-min-md.
.-show-min-mobile	Alias — maps to .-show-min-xs.
.-show-min-phablet	Alias — maps to .-show-min-sm.
.-show-min-sm	当视口处于或高于 sm 断点（20em）时显示（与 -hidden-max-sm 相反）；否则隐藏。
.-show-min-small	Alias — maps to .-show-min-sm.
.-show-min-tablet	Alias — maps to .-show-min-md.
.-show-min-x-large	Alias — maps to .-show-min-xl.
.-show-min-x-small	Alias — maps to .-show-min-xs.
.-show-min-xl	当视口处于或高于 xl 断点（62em）时显示（与 -hidden-max-xl 相反）；否则隐藏。
.-show-min-xs	当视口处于或高于 xs 断点（16em）时显示（与 -hidden-max-xs 相反）；否则隐藏。

自定义属性

属性	类型	默认	描述
--pantoken-bp-content	<length>	68.75em	content 断点的值（68.75em，手工编写，有主题化（不在令牌 IR 中））。覆盖它不会将已编译的 @media/@container 阈值向上移动。
--pantoken-bp-content-full-width	<length>	98.75em	content-full-width 断点的值（98.75em，手工编写，有主题化（不在令牌 IR 中））。覆盖它不会将已编译的 @media/@container 阈值向上移动。
--pantoken-bp-lg	<length>	48em	lg 断点的值（48em，镜像 --instui-component-tray-width-lg）。覆盖它不会将已编译的 @media/@container 阈值向上移动。
--pantoken-bp-md	<length>	30em	md 断点的值（30em，镜像 --instui-component-tray-width-md）。覆盖它不会将已编译的 @media/@container 阈值向上移动。
--pantoken-bp-sm	<length>	20em	sm 断点的值（20em，镜像 --instui-component-tray-width-sm）。覆盖它不会将已编译的 @media/@container 阈值向上移动。
--pantoken-bp-xl	<length>	62em	xl 断点的值（62em，镜像 --instui-component-tray-width-xl）。覆盖它不会将已编译的 @media/@container 阈值向上移动。
--pantoken-bp-xs	<length>	16em	xs 断点的值（16em，镜像 --instui-component-tray-width-xs）。覆盖它不会将已编译的 @media/@container 阈值向上移动。

条件

类型	查询	描述
media	(max-width: 16em)	xs 断点的上界。
media	(min-width: 16em)	xs 断点的下界。
media	(max-width: 20em)	sm 断点的上界。
media	(min-width: 20em)	sm 断点的下界。
media	(max-width: 30em)	md 断点的上界。
media	(min-width: 30em)	md 断点的下界。
media	(max-width: 48em)	lg 断点的上界。
media	(min-width: 48em)	lg 断点的下界。
media	(max-width: 62em)	xl 断点的上界。
media	(min-width: 62em)	xl 断点的下界。
media	(max-width: 68.75em)	content 断点的上界。
media	(min-width: 68.75em)	content 断点的下界。
media	(max-width: 98.75em)	content-full-width 断点的上界。
media	(min-width: 98.75em)	content-full-width 断点的下界。
container	(max-width: 16em)	针对标记容器评估的 xs 断点上界。
container	(min-width: 16em)	针对标记容器评估的 xs 断点下界。
container	(max-width: 20em)	针对标记容器评估的 sm 断点上界。
container	(min-width: 20em)	针对标记容器评估的 sm 断点下界。
container	(max-width: 30em)	针对已标记容器评估的 md 断点的上限。
container	(min-width: 30em)	针对已标记容器评估的 md 断点的下限。
container	(max-width: 48em)	针对已标记容器评估的 lg 断点的上限。
container	(min-width: 48em)	针对已标记容器评估的 lg 断点的下限。
container	(max-width: 62em)	针对已标记容器评估的 xl 断点的上限。
container	(min-width: 62em)	针对已标记容器评估的 xl 断点的下限。
container	(max-width: 68.75em)	针对已标记容器评估的 content 断点的上限。
container	(min-width: 68.75em)	针对已标记容器评估的 content 断点的下限。
container	(max-width: 98.75em)	针对已标记容器评估的 content-full-width 断点的上限。
container	(min-width: 98.75em)	针对已标记容器评估的 content-full-width 断点的下限。

消耗代币

Token	类型	值
--instui-component-tray-width-lg	<length>	48em
--instui-component-tray-width-md	<length>	30em
--instui-component-tray-width-sm	<length>	20em
--instui-component-tray-width-xl	<length>	62em
--instui-component-tray-width-xs	<length>	16em