VaporCSS size样式写法参考
宽度控制
| CSS 类 | 样式 | 备注 |
|---|---|---|
w-10 | width:10rpx; | 宽度 10rpx |
w-10px | width:10px; | 宽度 10px |
w-100% | width:100%; | 宽度 100% |
w-auto | width:auto; | 宽度自动 |
twh-10 | width:10rpx;height:10rpx; | 同时设置宽度和高度 |
twhr-10 | width:10rpx;height:10rpx;radius:10rpx; | 同时设置宽度、高度和圆角 |
ws-10 | min-width:10rpx; | 最小宽度 10rpx |
ws-10px | min-width:10px; | 最小宽度 10px |
ws-100% | min-width:100%; | 最小宽度 100% |
wl-10 | max-width:10rpx; | 最大宽度 10rpx |
wl-10px | max-width:10px; | 最大宽度 10px |
wl-100% | max-width:100%; | 最大宽度 100% |
高度控制
| CSS 类 | 样式 | 备注 |
|---|---|---|
h-10 | height:10rpx; | 高度 10rpx |
h-10px | height:10px; | 高度 10px |
h-100% | height:100%; | 高度 100% |
h-auto | height:auto; | 高度自动 |
twh-10 | width:10rpx;height:10rpx; | 同时设置宽度和高度 |
twhr-10 | width:10rpx;height:10rpx;radius:10rpx; | 同时设置宽度、高度和圆角 |
hs-10 | min-height:10rpx; | 最小高度 10rpx |
hs-10px | min-height:10px; | 最小高度 10px |
hs-100% | min-height:100%; | 最小高度 100% |
hl-10 | max-height:10rpx; | 最大高度 10rpx |
hl-10px | max-height:10px; | 最大高度 10px |
hl-100% | max-height:100%; | 最大高度 100% |
外边距控制
| CSS 类 | 样式 | 备注 |
|---|---|---|
m-10 | margin:10rpx; | 四边外边距 10rpx |
m-10px | margin:10px; | 四边外边距 10px |
m-100% | margin:100%; | 四边外边距 100% |
m-auto | margin:auto; | 外边距自动 |
mt-10 | margin-top:10rpx; | 顶部外边距 10rpx |
mb-10 | margin-bottom:10rpx; | 底部外边距 10rpx |
ml-10 | margin-left:10rpx; | 左侧外边距 10rpx |
mr-10 | margin-right:10rpx; | 右侧外边距 10rpx |
mtb-10 | margin-top:10rpx;margin-bottom:10rpx; | 上下外边距 10rpx |
mlr-10 | margin-left:10rpx;margin-right:10rpx; | 左右外边距 10rpx |
mltr-10 | margin-left:10rpx;margin-top:10rpx;margin-right:10rpx; | 左、上、右外边距 10rpx |
方向组合规则：
- 支持任意方向组合：l（左）、r（右）、t（上）、b（下）
- 例如：
mlb-10表示 margin-left:10rpx;margin-bottom:10rpx;
内边距控制
| CSS 类 | 样式 | 备注 |
|---|---|---|
p-10 | padding:10rpx; | 四边内边距 10rpx |
p-10px | padding:10px; | 四边内边距 10px |
p-100% | padding:100%; | 四边内边距 100% |
p-auto | padding:auto; | 内边距自动 |
方向组合规则：
- 支持任意方向组合，与外边距规则相同
- 例如：
ptb-10表示 padding-top:10rpx;padding-bottom:10rpx;
圆角控制
| CSS 类 | 样式 | 备注 |
|---|---|---|
r-10 | border-radius:10rpx; | 四边圆角 10rpx |
r-10px | border-radius:10px; | 四边圆角 10px |
r-100% | border-radius:100%; | 四边圆角 100%（圆形） |
r1-10 | border-top-left-radius:10rpx; | 左上角圆角 10rpx |
r2-10 | border-top-right-radius:10rpx; | 右上角圆角 10rpx |
r3-10 | border-bottom-left-radius:10rpx; | 左下角圆角 10rpx |
r4-10 | border-bottom-right-radius:10rpx; | 右下角圆角 10rpx |
方向组合规则：
- 支持任意方向组合，使用数字 1-4 表示四个角
- 1: 左上角, 2: 右上角, 3: 左下角, 4: 右下角
- 例如：
r12-10表示左上角和右上角圆角 10rpx
使用示例
基本尺寸设置
vue
<!-- 固定宽度和高度 -->
<view class="w-200 h-100 bg-gray-100">固定尺寸</view>
<!-- 百分比宽度 -->
<view class="w-100% h-50 bg-gray-200">占满宽度</view>
<!-- 自动宽度 -->
<view class="w-auto h-30 bg-gray-300">自动宽度</view>边距设置
vue
<!-- 四边外边距 -->
<view class="m-20 bg-blue-100">四边外边距 20rpx</view>
<!-- 上下外边距 -->
<view class="mtb-15 bg-green-100">上下外边距 15rpx</view>
<!-- 左右内边距 -->
<view class="mlr-25 p-15 bg-yellow-100">左右外边距 25rpx，内边距 15rpx</view>圆角设置
vue
<!-- 四边圆角 -->
<view class="w-100 h-100 r-10 bg-red-100">四边圆角 10rpx</view>
<!-- 左上和右上圆角 -->
<view class="w-100 h-100 r12-15 bg-purple-100">左上和右上圆角 15rpx</view>
<!-- 圆形 -->
<view class="w-80 h-80 r-100% bg-pink-100">圆形</view>组合使用
vue
<!-- 同时设置宽度、高度和圆角 -->
<view class="twhr-50 bg-blue-200">宽高 50rpx，圆角 50rpx</view>
<!-- 完整示例 -->
<view class="w-300 h-200 p-20 m-15 r-12 bg-gradient-to-r from-blue-400 to-purple-500 text-white">
组合使用示例
</view>最佳实践
- 统一单位：在项目中保持单位一致性，推荐使用 rpx 实现响应式
- 合理命名：使用语义化的类名，提高代码可读性
- 组合使用：灵活组合不同的尺寸类，实现复杂布局
- 避免过度使用：合理使用尺寸类，避免生成过多的 CSS 代码
- 与主题系统配合：结合主题系统的间距和圆角变量，保持设计一致性
通过 VaporCSS 尺寸系统，您可以轻松实现精确的布局控制，提高开发效率，同时保持代码的清晰和可维护性。