布局

Sizing 尺寸

宽高中最小/最大/固定尺；语义 container 宽与百分比分数；pvs-is-* / pvs-bs-* 逻辑尺寸（RTL 友好）。

百分比与分数

pvs-w-full

pvs-w-1/2

pvs-w-1/3

<div class="pvs-stack pvs-gap-2 pvs-border pvs-p-3 pvs-bg-surface-muted">
  <div class="pvs-w-full pvs-p-2 pvs-border pvs-bg-surface">pvs-w-full</div>
  <div class="pvs-w-1/2 pvs-p-2 pvs-border pvs-bg-surface">pvs-w-1/2</div>
  <div class="pvs-w-1/3 pvs-p-2 pvs-border pvs-bg-surface">pvs-w-1/3</div>
</div>

语义最小/最大宽

pvs-min-w-sm

pvs-max-w-prose 阅读宽 ~65ch

pvs-max-w-md

<div class="pvs-stack pvs-gap-2">
  <div class="pvs-min-w-sm pvs-p-2 pvs-border pvs-bg-surface-muted">
    <code>pvs-min-w-sm</code>
  </div>
  <div class="pvs-max-w-prose pvs-p-2 pvs-border">
    <code>pvs-max-w-prose</code> 阅读宽 ~65ch</div>
      <div class="pvs-max-w-md pvs-p-2 pvs-border pvs-bg-surface-muted">
        <code>pvs-max-w-md</code>
      </div>
    </div>

数字尺 rem

<div class="pvs-flex pvs-gap-3 pvs-items-end">
  <div class="pvs-w-16 pvs-h-8 pvs-border pvs-bg-primary" style="opacity:.8">
  </div>
  <div class="pvs-w-24 pvs-h-8 pvs-border pvs-bg-primary" style="opacity:.6">
  </div>
  <div class="pvs-w-32 pvs-h-8 pvs-border pvs-bg-primary" style="opacity:.4">
  </div>
</div>

高度与视口

pvs-h-32

<div class="pvs-h-32 pvs-w-full pvs-border pvs-flex pvs-items-center pvs-justify-center pvs-bg-surface-muted">
  <code>pvs-h-32</code>
</div>

auto / fit

w-autow-fit

<div class="pvs-flex pvs-gap-2">
  <span class="pvs-w-auto pvs-p-2 pvs-border">w-auto</span>
  <span class="pvs-w-fit pvs-p-2 pvs-border pvs-bg-surface-muted">w-fit</span>
</div>

响应式

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

宽随断点

<div class="pvs-w-full md:pvs-w-1/2 lg:pvs-w-1/3 pvs-p-3 pvs-border pvs-bg-surface-muted">宽随断点</div>

逻辑尺寸 inline / block

pvs-is-* = inline-size（LTR 下等同宽）；pvs-bs-* = block-size（LTR 下等同高）。dir="rtl" 或竖排时自动随书写方向。

pvs-is-full · RTL

pvs-is-1/2

pvs-bs-16

<div class="pvs-stack pvs-gap-2 pvs-border pvs-p-3" dir="rtl" style="max-width:20rem">
  <div class="pvs-is-full pvs-p-2 pvs-border pvs-bg-surface-muted">
    <code>pvs-is-full</code> · RTL</div>
      <div class="pvs-is-1/2 pvs-p-2 pvs-border pvs-bg-surface">
        <code>pvs-is-1/2</code>
      </div>
      <div class="pvs-bs-16 pvs-is-full pvs-p-2 pvs-border pvs-flex pvs-items-center pvs-justify-center pvs-bg-surface-muted">
        <code>pvs-bs-16</code>
      </div>
    </div>

响应式

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

逻辑宽随断点

<div class="pvs-is-full md:pvs-is-1/2 pvs-p-3 pvs-border pvs-bg-surface-muted">逻辑宽随断点</div>

类名速查

类	样式
`pvs-w-full` / `pvs-h-full`	物理宽高 100%
`pvs-is-full` / `pvs-bs-full`	逻辑 inline/block 100%
`pvs-is-1/2` … `pvs-is-3/4`	逻辑 inline 分数
`pvs-max-is-prose`	逻辑阅读最大宽 ~65ch
`pvs-w-1/2` … `pvs-w-3/4`	物理分数宽
`pvs-min-w-3xs` … `pvs-min-w-7xl`	语义最小宽
`pvs-max-w-prose`	物理阅读最大宽
`pvs-min-h-screen` / `pvs-min-bs-screen`	最小视口高 / 逻辑块向
`pvs-w-24` … `pvs-w-96`	数字尺 rem