微信小程序 WXSS app.wxss 全局样式设置
设置微信小程序的全局样式app.wxss特性wxss特性wxss 变量写法app.wxss 示例写法关于弹性布局的一些看法app.wxss特性定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。wxss特性基本具备 css3的大部分特性,具备less,sass...
·
设置微信小程序的全局样式
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写死,也不是不可。
更多推荐
已为社区贡献2条内容
所有评论(0)