本文系转载:
原文作者: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;//透明度}