Uniapp CSS

代码位置: https://github.com/windyeasy/common-frontend-code/blob/master/uni-vue3-template/src/assets/css/uniapp.css
代码

css

/* 常用字体大小 */
.fs-48 {
  font-size: 48rpx;
}

.fs-40 {
  font-size: 40rpx;
}

.fs-38 {
  font-size: 38rpx;
}

.fs-36 {
  font-size: 36rpx;
}

.fs-32 {
  font-size: 32rpx;
}

.fs-30 {
  font-size: 30rpx;
}

.fs-28 {
  font-size: 28rpx;
}

.fs-24 {
  font-size: 24rpx;
}

.fs-22 {
  font-size: 22rpx;
}

.fs-20 {
  font-size: 20rpx;
}

/* 常用padding */

/* 32rpx */
.p-t-32 {
  padding-top: 32rpx;
}

.p-b-32 {
  padding-bottom: 32rpx;
}

.p-l-32 {
  padding-left: 32rpx;
}

.p-r-32 {
  padding-right: 32rpx;
}

.p-b-32 {
  padding-bottom: 32rpx;
}

.px-32 {
  padding-left: 32rpx;
  padding-right: 32rpx;
}

.py-32 {
  padding-top: 32rpx;
  padding-bottom: 32rpx;
}

.p-32 {
  padding: 32rpx;
}

/* 24rpx */
.p-t-24 {
  padding-top: 24rpx;
}

.p-b-24 {
  padding-bottom: 24rpx;
}

.p-l-24 {
  padding-left: 24rpx;
}

.p-r-24 {
  padding-right: 24rpx;
}

.px-24 {
  padding-left: 24rpx;
  padding-right: 24rpx;
}

.py-24 {
  padding-top: 24rpx;
  padding-bottom: 24rpx;
}

.p-24 {
  padding: 24rpx;
}

/* 16rpx  */
.p-t-16 {
  padding-top: 16rpx;
}

.p-b-16 {
  padding-bottom: 16rpx;
}

.p-l-16 {
  padding-left: 16rpx;
}

.p-r-16 {
  padding-right: 16rpx;
}

.px-16 {
  padding-left: 16rpx;
  padding-right: 16rpx;
}

.py-16 {
  padding-top: 16rpx;
  padding-bottom: 16rpx;
}

.p-16 {
  padding: 16rpx;
}

/* 14rpx  */
.p-t-14 {
  padding-top: 14rpx;
}

.p-b-14 {
  padding-bottom: 14rpx;
}

.p-l-14 {
  padding-left: 14rpx;
}

.p-r-14 {
  padding-right: 14rpx;
}

.px-14 {
  padding-left: 14rpx;
  padding-right: 14rpx;
}

.py-14 {
  padding-top: 14rpx;
  padding-bottom: 14rpx;
}

.p-14 {
  padding: 14rpx;
}

/* 12rpx  */
.p-t-12 {
  padding-top: 12rpx;
}

.p-b-12 {
  padding-bottom: 12rpx;
}

.p-l-12 {
  padding-left: 12rpx;
}

.p-r-12 {
  padding-right: 12rpx;
}

.px-12 {
  padding-left: 12rpx;
  padding-right: 12rpx;
}

.py-12 {
  padding-top: 12rpx;
  padding-bottom: 12rpx;
}

.p-12 {
  padding: 12rpx;
}
/* 常用margin */

/* 32rpx */
.m-t-32 {
  margin-top: 32rpx;
}

.m-b-32 {
  margin-bottom: 32rpx;
}

.m-l-32 {
  margin-left: 32rpx;
}

.m-r-32 {
  margin-right: 32rpx;
}

.m-b-32 {
  margin-bottom: 32rpx;
}

.mx-32 {
  margin-left: 32rpx;
  margin-right: 32rpx;
}

.my-32 {
  margin-top: 32rpx;
  margin-bottom: 32rpx;
}

.m-32 {
  margin: 32rpx;
}

/* 24rpx */
.m-t-24 {
  margin-top: 24rpx;
}

.m-b-24 {
  margin-bottom: 24rpx;
}

.m-l-24 {
  margin-left: 24rpx;
}

.m-r-24 {
  margin-right: 24rpx;
}

.mx-24 {
  margin-left: 24rpx;
  margin-right: 24rpx;
}

.my-24 {
  margin-top: 24rpx;
  margin-bottom: 24rpx;
}

.m-24 {
  margin: 24rpx;
}

/* 16rpx  */
.m-t-16 {
  margin-top: 16rpx;
}

.m-b-16 {
  margin-bottom: 16rpx;
}

.m-l-16 {
  margin-left: 16rpx;
}

.m-r-16 {
  margin-right: 16rpx;
}

.mx-16 {
  margin-left: 16rpx;
  margin-right: 16rpx;
}

.my-16 {
  margin-top: 16rpx;
  margin-bottom: 16rpx;
}

.m-16 {
  margin: 16rpx;
}

/* 14rpx */
.m-t-14 {
  margin-top: 14rpx;
}

.m-b-14 {
  margin-bottom: 14rpx;
}

.m-l-14 {
  margin-left: 14rpx;
}

.m-r-14 {
  margin-right: 14rpx;
}

.mx-14 {
  margin-left: 14rpx;
  margin-right: 14rpx;
}

.my-14 {
  margin-top: 14rpx;
  margin-bottom: 14rpx;
}

.m-14 {
  margin: 14rpx;
}

/* 12rpx  */
.m-t-12 {
  margin-top: 12rpx;
}

.m-b-12 {
  margin-bottom: 12rpx;
}

.m-l-12 {
  margin-left: 12rpx;
}

.m-r-12 {
  margin-right: 12rpx;
}

.mx-12 {
  margin-left: 12rpx;
  margin-right: 12rpx;
}

.my-12 {
  margin-top: 12rpx;
  margin-bottom: 12rpx;
}

.m-12 {
  margin: 12rpx;
}

/* 常用圆角 */
.br-32 {
  border-radius: 32rpx;
}

.br-24 {
  border-radius: 24rpx;
}

.br-16 {
  border-radius: 16rpx;
}

.br-8 {
  border-radius: 8rpx;
}
Uniapp CSS

代码

使用

方式一

方式二

Uniapp CSS ​

代码 ​

使用 ​

方式一 ​

方式二 ​

Uniapp CSS

代码

使用

方式一

方式二
