本文系转载:
原文作者:chenzheng8975
原文地址:https://www.cnblogs.com/chenzheng8975/p/9605186.html
## 微信小程序常用样式汇总
小程序特点:用完即走、低频使用、性能要求低,不支持webview;
- 以iphone6尺寸(750*1334)为视觉稿进行设计;
- iphone6下1px=1rpx=0.5pt iphone6 plux下1px=0.6rpx;
- 使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会;
1.设置全局字体样式app.wxss:
text{ font-family:MicroSoft yahei; }
2.设置弹性盒子模型:
.container{ /*弹性模型*/ display:flex; /*垂直方向 列方向 排布*/ flex-direction:column; /*居中*/ align-items:center; /*要从整体解决排布的问题是最好的方案*/ }
3.设置页面全屏样式及背景色:
page{ height:100%; background:#b3d4db; }
4.全局设置导航条颜色app.json:
"window": { "navigationBarBackgroundColor": "#405f80" }
5.页面设置导航条颜色和标题*.json:
{ "navigationBarBackgroundColor": "#405f80", "navigationBarTitleText":"文与字" }
6.设置字体属性:
.user-name{ font-size:32rpx; font-weight:bold; }
7.创建圆角矩形边框:
.moto-container{ border:1px solid #405f80; width:200rpx; height:80rpx; border-radius:5rpx; text-align:center; }
8.外边距设置:
margin-top:20rpx;
margin-bottom:40rpx;
9.内边距设置:
padding-bottom:20rpx;
10.上、下边线设置:
border-bottom:1px solid #ededed;
border-top:1px solid #ededed;
11.文字间距设置:
letter-spacing:2rpx;
12.垂直居中(此元素放置在父元素的中部):
vertical-align: middle;
13.设置子元素Image样式:
.circle-img image{ width:90rpx; height: 90rpx }
14.最底层垂直居中横线样式:
.horizon{ width:660rpx; height: 2rpx; background-color: #e5e5e5; vertical-align: middle; position:relative; top:46rpx; margin: 0 auto; z-index: -99 }
15.图片居中覆盖:
.audio{ width:102rpx; height:110rpx; position: absolute; left: 50%; margin-left: -51rpx;//经典水平居中方式 top:180rpx; margin-top: 20rpx; opacity:0.6;//透明度 }