微信小程序样式大全（一）

1.尺寸

• pt:逻辑分辨率； pt的大小与屏幕的尺寸有关系，简单可以理解为长度和视觉单位
• px:指物理分辨率,和屏幕尺寸没关系
• 1个pt可以有1个px构成，也可以有2个px,还可以有3个甚至更多
• iphone6是由2个px构成的
• 以iphone6的物理像素750*1334为视觉稿进行设计，而在小程序中使用rpx为单位
• iphone6下 1px = 1rpx = 0.5pt
• 使用rpx小程序会在不同分辨率的设备下自动进行转换，而px不会
• 不是所有的单位都适合rpx，字体不适合rpx,会导致不同设备看不清

2.设置全局字体样式app.wxss：

text{ font-family:MicroSoft yahei; }

 

3.设置弹性盒子模型：

.container{
/*弹性模型*/
display:flex;
/*垂直方向 列方向 排布*/
flex-direction:column;
/*居中*/
align-items:center;
/*要从整体解决排布的问题是最好的方案*/
}

语法：

水平主轴 justify-content: flex-start | flex-end | center | space-between | space-around

垂直交叉轴 align-items: flex-start | flex-end | center | baseline | stretch（等高）

交叉轴align-content: flex-start | flex-end | center | space-between | space-around | stretch; （多根水平轴线）