尺寸

尺寸的范围包含:字体大小、宽度、高度、外边距、内边距、上右下左距离(top、right、bottom、left)、层级、圆角。

其中,宽度和高度包含了百分比,边距与距离包含方位"上右下左",分别为"trbl"。

font-size = 10 12 13 14 15 16 17 18 20 24 28 32 40
width-size = 30 40 50 60 70 80 90 100 200
height-size = 30 35 40 45 50 55 60 65 70 80 90 100
margin-size = 5 10 15 20 30 40 45 50 55 60
padding-size = 5 10 15 20 25 30 35 40 45 50
position-size = 0 10 20 30 40 50

// 宽度百分比
width-percent = 20 25 33.3333 50 100

// 高度百分比
height-percent = 50 100

// 方向
direction = {
  t: top,
  r: right, 
  b: bottom,
  l: left,
  tb: top bottom,
  tr: top right,
  lt: left top,
  lr: left right,
  lb: left bottom  
}

// 层级,不支持 vw
index-size = 1 2 3 4 5 6 7 8 9 1000 1001 1002 1003 9999 10000

// 圆角,不支持 vw
radius-size = 1 2 3 4 5 6 7 8 10 15 20 

例子:

  • 字体,f10f12vw-f10vw-f12
  • 宽度,w30w40vw-w30vw-w40
    • 百分比,width-20width-100height-100
  • 高度,h30h40vw-h30vw-h40
    • 百分比,height-100
  • 外边距,m5m10vw-m10vw-m5
    • 上外边距,mt5vw-mt5
    • 右外边距,mr5vw-mr5
    • 下外边距,mb5vw-mb5
    • 左外边距,ml5vw-ml5
    • 左右自适应,m-auto
  • 内边距,p5p10p15
    • 上内边距,pt5pt10vw-pt5
    • 右内边距,pr5pr10vw-pt5
    • 下内边距,pb5pb10vw-pb10
    • 左内边距,pl5vw-pb10
  • 距离
    • 上距离,t5t10vw-t5
    • 右距离,r5r10vw-r5
    • 下距离,b5b10vw-b5
    • 左距离,l5l10vw-l5
  • 层级,z1z999
  • 圆角,br1br10