微信小程序常用樣式匯總

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