微信小程序样式

微信小程序样式

小程序特点：用完即走、低频使用、性能要求低，不支持webview；
以iphone6尺寸 750*1334为视觉稿进行设计；
iphone6下1px=1rpx=0.5pt iphone6 plux下1px=0.6rpx；
使用rpx，小程序会自动在不同的分辨率下进行转换，而使用px为单位不会；

1.设置全局字体样式app.wxss：
text{font-family:MicroSoftyahei;}
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:1pxsolid#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:1pxsolid#ededed;border-top:1pxsolid#ededed;
11.文字间距设置：
letter-spacing:2rpx;
12.垂直居中 此元素放置在父元素的中部：
vertical-align:middle;
13.设置子元素Image样式：
.circle-imgimage{width:90rpx;height:90rpx}
14.最底层垂直居中横线样式：
.horizon{width:660rpx;height:2rpx;background-color:#e5e5e5;vertical-align:middle;position:relative;top:46rpx;margin:0auto;z-index:-99}
15.图片居中覆盖:
.audio{width:102rpx;height:110rpx;position:absolute;left:50%;margin-left:-51rpx;//经典水平居中方式top:180rpx;margin-top:20rpx;opacity:0.6;//透明度}
关于微信小程序样式 微信小程序常用样式汇总今天就说到这里，喜欢记得收藏一下。搜索（微信小程序样式,微信小程序常用样式汇总
）还能找到更多相关文章。