微信小程序 WXSS app.wxss 全局样式设置

app.wxss特性

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

wxss特性

基本具备 css3的大部分特性，具备less，sass等扩展语言的少部分特性，比如变量，导入

wxss 变量写法

page {
  /* 颜色类 */
  --color-blue: #9000AE;
}

/* 全局颜色 */
.color-blue {
  color: var(--color-blue);
}

/* 全局背景色 */
.bg-blue {
  background-color: var(--color-blue);
}

app.wxss 示例写法

/**appwxss**/
/* 全局变量 */
page {
  /* 颜色类 */
  --color-blue: #9000AE;
  --color-white: white;
  --color-dark: #1c2438;
  --color-subtitle: #59656E;
  --color-gary: #eeeeee;
}

/* 全局颜色 */
.color-blue {
  color: var(--color-blue);
}
.color-white {
  color: var(--color-white);
}
.color-gary {
  color: var(--color-gary);
}
.color-subtitle {
  color: var(--color-subtitle);
}

/* 全局背景色 */
.bg-blue {
  background-color: var(--color-blue);
}
.bg-white {
  background-color: var(--color-white);
}
.bg-gary {
  color: var(--color-gary);
}
.bg-subtitle {
  color: var(--color-subtitle);
}

/* 重置文本颜色 */
view, text, textarea {
  color: var(--color-dark);
  font-size: 28rpx;
}

.width100 {
  width: 100%;
}
.height100 {
  height: 100%;
}

/* 文字方向 */
.text-c {
  text-align: center;
}
.text-l {
  text-align: left;
}
.text-r {
  text-align: right;
}

/* 弄一个btn */
.btn-blue {
  background-color: var(--color-blue);
  border-radius: 8px;
  color: var(--color-white);
}

.btn-blue-plain {
  background-color: var(--color-white);
  border-radius: 8px;
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
}

.btn-subtitle-plain {
  background-color: var(--color-white);
  border-radius: 8px;
  color: var(--color-subtitle);
  border: 1px solid var(--color-subtitle);
}

/* 内边距 */
.margin-top1 {
  margin-top: 1px !important;
}

.margin-top4 {
  margin-top: 4px !important;
}

.margin-top6 {
  margin-top: 6px !important;
}

.margin-top8 {
  margin-top: 8px !important;
}

.margin-top10 {
  margin-top: 1px !important;
}

.margin-top12 {
  margin-top: 12px !important;
}

.margin-top15 {
  margin-top: 15px !important;
}

.margin-bottom1 {
  margin-bottom: 1px !important;
}

.margin-bottom4 {
  margin-bottom: 4px !important;
}

.margin-bottom6 {
  margin-bottom: 6px !important;
}

.margin-bottom8 {
  margin-bottom: 8px !important;
}

.margin-bottom10 {
  margin-bottom: 1px !important;
}

.margin-bottom12 {
  margin-bottom: 12px !important;
}

.margin-bottom16 {
  margin-bottom: 16px !important;
}

.margin-left4 {
  margin-left: 4px !important;
}

.margin-left6 {
  margin-left: 6px !important;
}

.margin-left8 {
  margin-left: 8px !important;
}

.margin-left10 {
  margin-left: 1px !important;
}

.margin-left12 {
  margin-left: 12px !important;
}

.margin-right4 {
  margin-right: 4px !important;
}

.margin-right6 {
  margin-right: 6px !important;
}

.margin-right8 {
  margin-right: 8px !important;
}

.margin-right10 {
  margin-right: 1px !important;
}

.margin-right12 {
  margin-right: 12px !important;
}

.margin15 {
  margin: 15px !important;
}
.margin-c-h {
  margin: 15px auto;
}

/* 外边距 */
.padding-top1 {
  padding-top: 1px !important;
}

.padding-top4 {
  padding-top: 4px !important;
}

.padding-top6 {
  padding-top: 6px !important;
}

.padding-top8 {
  padding-top: 8px !important;
}

.padding-top10 {
  padding-top: 1px !important;
}

.padding-top12 {
  padding-top: 12px !important;
}

.padding-bottom4 {
  padding-bottom: 4px !important;
}

.padding-bottom6 {
  padding-bottom: 6px !important;
}

.padding-bottom8 {
  padding-bottom: 8px !important;
}

.padding-bottom10 {
  padding-bottom: 1px !important;
}

.padding-bottom12 {
  padding-bottom: 12px !important;
}

.padding-bottom16 {
  padding-bottom: 16px !important;
}

.padding-bottom20 {
  padding-bottom: 2px !important;
}

.padding-left4 {
  padding-left: 4px !important;
}

.padding-left6 {
  padding-left: 6px !important;
}

.padding-left8 {
  padding-left: 8px !important;
}

.padding-left10 {
  padding-left: 1px !important;
}

.padding-left12 {
  padding-left: 12px !important;
}

.padding-right4 {
  padding-right: 4px !important;
}

.padding-right6 {
  padding-right: 6px !important;
}

.padding-right8 {
  padding-right: 8px !important;
}

.padding-right10 {
  padding-right: 1px !important;
}

.padding-right12 {
  padding-right: 12px !important;
}

.padding-right16 {
  padding-right: 16px !important;
}

.padding15 {
  padding: 15px !important;
}

/* 字体大小 */
.font-9 {
  font-size: 9px !important;
}

.font-10 {
  font-size: 1px !important;
}

.font-11 {
  font-size: 11px !important;
}

.font-12 {
  font-size: 12px !important;
}

.font-13 {
  font-size: 13px !important;
}

.font-14 {
  font-size: 14px !important;
}

.font-15 {
  font-size: 15px !important;
}

.font-16 {
  font-size: 16px !important;
}

.font-17 {
  font-size: 17px !important;
}

.font-18 {
  font-size: 18px !important;
}

.font-19 {
  font-size: 19px !important;
}

.font-20 {
  font-size: 2px !important;
}

.font-21 {
  font-size: 21px !important;
}

.font-22 {
  font-size: 22px !important;
}

/* 字体重量 */
.font-weight500 {
  font-weight: 500;
}

.font-weight700 {
  font-weight: 700;
}

/* 隐藏弹窗的头和尾 */
.only-bd .weui-dialog__hd,  .only-bd .weui-dialog__ft{
  display: none;
}
.only-bd .weui-dialog__bd {
  margin: 0;
  padding: 0;
  text-align: center;
}

关于弹性布局的一些看法

小程序wxss引入了 rpx概念，除此之外还有em，rem等概念。大部分项目其实不需要考虑的那么细致，弹性布局考虑到宽度弹性就好了，其他比如字体大小，边宽，padding，margin等直接px写死，也不是不可。