布局 · 响应式
下载

布局

Responsive 响应式

移动优先：小屏打底，sm: md: lg: 从该断点往上增强。断点 576 / 768 / 992 px。

移动优先 · 一句话

无前缀的类 = 全断点（含手机）；带前缀的类 = 仅 ≥ 该断点 才生效。先写手机布局，再用前缀加大屏样式——不是桌面优先。

栅格列宽两种写法见下文；分栏示例见 弹性栅格 · 移动优先。

常见写法对照

断点 576 / 768 / 992 / 1200 px；移动优先（min-width 媒体查询）。

场景旧写法（row/col 系）PivCSS
显示切换d-none d-md-flexpvs-hidden md:pvs-flex
渐进列宽col-12 col-md-6 col-lg-4pvs-col-full md:pvs-col-6 lg:pvs-col-4
内置 lg 折叠col-lg-8pvs-col-lg-8（<992px 满宽）
内置 xl 折叠col-xl-4pvs-col-xl-4（<1200px 满宽）

栅格列宽 · 两种写法

写法行为适用
pvs-col-lg-8<992px 满宽堆叠 · ≥992px 跨 8 轨主侧栏、省事
pvs-col-xl-4<1200px 满宽堆叠 · ≥1200px 跨 4 轨大屏四列、宽屏主侧栏
pvs-col-full md:pvs-col-6 lg:pvs-col-4手机满宽 → md 两列 → lg 三列卡片流、精细控制
pvs-col-full md:pvs-col-6 xl:pvs-col-3手机满宽 → md 两列 → xl 四列大屏卡片墙
pvs-col-4（仅裸类）各断点都跨 4 轨，小屏不会自动满宽仅桌面 demo；生产慎用

前缀规则

类名写成 md:pvs-flex = 仅 ≥768px 时应用 pvs-flex；默认（无前缀）= 全断点。

类名说明
（无前缀）全断点
sm:≥ 576px
md:≥ 768px
lg:≥ 992px
xl:≥ 1200px

栅格列数（渐进示例）

收窄窗口：满宽 → md 两列 → lg 三列。

A
B
C
<div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:0.75rem">
  <div class="pvs-col-full md:pvs-col-6 lg:pvs-col-4 pvs-p-3 pvs-border pvs-bg-surface-muted">A</div>
  <div class="pvs-col-full md:pvs-col-6 lg:pvs-col-4 pvs-p-3 pvs-border pvs-bg-surface-muted">B</div>
  <div class="pvs-col-full md:pvs-col-6 lg:pvs-col-4 pvs-p-3 pvs-border">C</div>
</div>

xl 断点（≥1200px）

v1.1 起支持 xl:pvs-*，对齐大屏断点档（1200px+）。

满宽 → md:6 → xl:3
B
C
D
<div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:0.5rem">
  <div class="pvs-col-full md:pvs-col-6 xl:pvs-col-3 pvs-p-2 pvs-border pvs-bg-surface-muted">满宽 → md:6 → xl:3</div>
  <div class="pvs-col-full md:pvs-col-6 xl:pvs-col-3 pvs-p-2 pvs-border pvs-bg-surface-muted">B</div>
  <div class="pvs-col-full md:pvs-col-6 xl:pvs-col-3 pvs-p-2 pvs-border">C</div>
  <div class="pvs-col-full md:pvs-col-6 xl:pvs-col-3 pvs-p-2 pvs-border">D</div>
</div>

显示切换

md:flex · lg:gridB
<div class="pvs-hidden md:pvs-flex lg:pvs-grid pvs-gap-3 pvs-p-3 pvs-border" style="--pvs-grid-columns:2">
  <span class="pvs-p-2 pvs-border">md:flex · lg:grid</span>
  <span class="pvs-p-2 pvs-border">B</span>
</div>

间隙与间距

gap 随断点B
<div class="pvs-flex pvs-flex-col md:pvs-flex-row pvs-gap-2 md:pvs-gap-6 pvs-p-3 pvs-border">
  <span class="pvs-p-2 pvs-bg-surface-muted pvs-border">gap 随断点</span>
  <span class="pvs-p-2 pvs-border">B</span>
</div>

宽度分数

宽 100% → 50% → 33%
<div class="pvs-w-full md:pvs-w-1/2 lg:pvs-w-1/3 pvs-p-3 pvs-border pvs-bg-surface-muted">宽 100% → 50% → 33%</div>

仅某断点隐藏

小屏广告条 · md 起隐藏
<span class="pvs-inline pvs-p-2 pvs-border md:pvs-hidden">小屏广告条 · md 起隐藏</span>

类名速查

类样式
sm:pvs-*≥576px 生效
md:pvs-*≥768px 生效
lg:pvs-*≥992px 生效
xl:pvs-*≥1200px 生效
pvs-col-lg-*移动优先 · lg 以下满宽
pvs-col-xl-*移动优先 · xl 以下满宽
pvs-col-full md:pvs-col-6渐进列宽
md:pvs-col-6栅格列
md:pvs-hidden断点隐藏
lg:pvs-gap-8断点间隙