微信小程序經常使用樣式彙總

本文系轉載：
原文做者：chenzheng8975
原文地址：http://www.javashuo.com/article/p-whmhabbj-ce.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;//透明度
}