Vusui-css 样式库

Width 宽度

设置元素的 width 样式。

对应文件

@vusui/css/lib/width.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

Width 常规宽度

使用 vus-w-{size} 类可元素的 width: {size}%; 常规宽度。

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

Min-width 最小宽度

使用 vus-w-min-{size} 类可元素的 min-width: {size}%; 最小宽度。

vus-w-min-20
vus-w-min-80
vus-w-min-50
vus-w-min-50
<div class="vus-w-min-20"></div>
<div class="vus-w-min-80"></div>

Max-width 最大宽度

使用 vus-w-max-{size} 类可元素的 max-width: {size}%; 最大宽度。

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

Viewport width 视口宽度

使用 vus-vw-{size} 类可元素的 width: {size}vw; 视口宽度。

vus-vw-20
vus-vw-10
vus-vw-30
<div class="vus-vw-20"></div>
<div class="vus-vw-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

Width 常规宽度

使用 vus-w-px-{size} 类可元素的 width: {size}px; 常规宽度。

vus-w-px-150
vus-w-px-150
vus-w-px-300
vus-w-px-300
<div class="vus-w-100">
  <div class="vus-w-px-100"></div>
  <div class="vus-w-px-100"></div>
</div>

Min-width 最小宽度

使用 vus-w-min-px-{size} 类可元素的 min-width: {size}px; 最小宽度。

vus-w-min-px-150
vus-w-min-px-300
vus-w-min-px-450
vus-w-min-px-150
<div class="vus-w-min-px-100"></div>
<div class="vus-w-min-px-200"></div>

Max-width 最大宽度

使用 vus-w-max-px-{size} 类可元素的 max-width: {size}px; 最大宽度。

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

Calc width 计算宽度

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

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

vus-w-calc-150
vus-w-px-150
<div class="vus-w-calc-200"></div>
<div class="vus-w-px-200"></div>

<div class="vus-vw-calc-200"></div>
<div class="vus-w-px-200"></div>

其它宽度

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

响应式方案

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

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