Vusui-css 样式库

Height 高度

设置元素的 height 样式。

对应文件

@vusui/css/lib/height.cssopen in new window

百分比高度

设置元素的百分比高度。

size 值表
5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100

Height 常规高度

使用 vus-h-{size} 类可元素的 height: {size}%; 常规高度。

vus-h-30
vus-h-50
vus-h-20
<div class="vus-h-20"></div>
<div class="vus-h-80"></div>

Min-height 最小高度

使用 vus-h-min-{size} 类可元素的 min-height: {size}%; 最小高度。

vus-h-min-20
vus-h-min-60
vus-h-min-20
<div class="vus-h-min-20"></div>
<div class="vus-h-min-80"></div>

Max-height 最大高度

使用 vus-h-max-{size} 类可元素的 max-height: {size}%; 最大高度。

vus-h-max-30
vus-h-max-70
<div class="vus-h-max-20"></div>
<div class="vus-h-max-80"></div>

Viewport height 视口高度

使用 vus-vh-{size} 类可元素的 height: {size}vh; 视口高度。

vus-vh-5
vus-vh-10
<div class="vus-vh-20"></div>
<div class="vus-vh-80"></div>

像素高度

设置元素的像素高度。

size 值表
1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750

Height 常规高度

使用 vus-h-px-{size} 类可元素的 height: {size}px; 常规高度。

vus-h-px-50
vus-h-px-150
<div class="vus-h-px-100"></div>
<div class="vus-h-px-200"></div>

Min-height 最小高度

使用 vus-h-min-px-{size} 类可元素的 min-height: {size}px; 最小高度。

vus-h-min-px-100
vus-h-min-px-100
<div class="vus-h-min-px-100"></div>
<div class="vus-h-min-px-200"></div>

Max-height 最大高度

使用 vus-h-max-px-{size} 类可元素的 max-height: {size}px; 最大高度。

vus-h-max-px-200
vus-h-max-px-300
<div class="vus-h-max-px-200"></div>
<div class="vus-h-max-px-300"></div>

Calc height 计算高度

使用 vus-h-calc-{size} 类可元素的 height: calc(100% - {size}px); 计算百分比高度。

使用 vus-vh-calc-{size} 类可元素的 height: calc(100vh - {size}px); 计算视口高度。

vus-h-calc-100
vus-h-px-100
<div class="vus-h-calc-100"></div>
<div class="vus-h-px-100"></div>

<div class="vus-vh-calc-100"></div>
<div class="vus-h-px-100"></div>

其它高度

样式名称描述
vus-h-0设置高度为 0px
vus-h-auto设置高度为 auto
vus-h-min-auto设置最小高度为 auto
vus-h-max-auto设置最大高度为 auto
<div class="vus-h-0"></div>
<div class="vus-h-auto"></div>
<div class="vus-h-min-auto"></div>
<div class="vus-h-max-auto"></div>

响应式方案

响应式预设了四个响应尺寸：

分辨率≥567px≥768px≥1024px≥1280px
常规vus-h-xs-*
vus-h-px-xs-*		vus-h-sm-*
vus-h-px-sm-*		vus-h-md-*
vus-h-px-md-*		vus-h-lg-*
vus-h-px-lg-*
最小vus-h-min-xs-*
vus-h-min-px-xs-*		vus-h-min-sm-*
vus-h-min-px-sm-*		vus-h-min-md-*
vus-h-min-px-md-*		vus-h-min-lg-*
vus-h-min-px-lg-*
最大vus-h-max-xs-*
vus-h-max-px-xs-*		vus-h-max-sm-*
vus-h-max-px-sm-*		vus-h-max-md-*
vus-h-max-px-md-*		vus-h-max-lg-*
vus-h-max-px-lg-*
视口vus-vh-xs-*vus-vh-sm-*vus-vh-md-*vus-vh-lg-*
计算vus-h-calc-xs-*
vus-vh-calc-xs-*		vus-h-calc-sm-*
vus-vh-calc-sm-*		vus-h-calc-md-*
vus-vh-calc-md-*		vus-h-calc-lg-*
vus-vh-calc-lg-*
<div class="vus-h-20 vus-h-xs-40 vus-h-sm-60 vus-h-md-80 vus-h-lg-100"></div>
<div
  class="vus-h-px-20 vus-h-px-xs-40 vus-h-px-sm-60 vus-h-px-md-80 vus-h-px-lg-100"
></div>
<div
  class="vus-vh-20 vus-vh-xs-40 vus-vh-sm-60 vus-vh-md-80 vus-vh-lg-100"
></div>