布局

Visibility 可见性

显示/隐藏与屏幕阅读器专用可见性。

隐藏与不可见

pvs-hidden 不占位；pvs-invisible 占位但不可见。

visible · invisible 占位 · hidden后的文字

<p class="pvs-m-0">
  <span class="pvs-visible">visible</span> · <span class="pvs-invisible pvs-border pvs-px-2">invisible 占位</span> · <span class="pvs-hidden">hidden</span>后的文字</p>

仅屏幕阅读器

<button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm">菜单 <span class="pvs-sr-only">打开导航</span>
</button>

响应式显隐

移动菜单 / 桌面导航常用 md:pvs-hidden + md:pvs-block 组合。

仅小屏 md 起显示

<div class="pvs-p-3 pvs-border">
  <span class="pvs-inline pvs-p-2 pvs-bg-surface-muted pvs-border md:pvs-hidden">仅小屏</span>
  <span class="pvs-hidden md:pvs-inline pvs-p-2 pvs-border">md 起显示</span>
</div>

折叠占位

前文 invisible 占位后文不断行

<p class="pvs-m-0">前文 <span class="pvs-invisible pvs-border pvs-px-4">invisible 占位</span> 后文不断行</p>

响应式

移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见响应式。

小屏可见 · md 起隐藏

<span class="pvs-inline pvs-p-2 pvs-border pvs-bg-surface-muted md:pvs-hidden">小屏可见 · md 起隐藏</span>

类名速查

类	样式
`pvs-hidden`	display: none
`pvs-visible`	visibility: visible
`pvs-invisible`	visibility: hidden（占位）
`pvs-sr-only`	视觉隐藏 · 读屏可见
`md:pvs-hidden`	md 起隐藏