2020年微信小程序开发扫盲课程，第三篇：样式和布局

1. 尺寸单位。

1.1 rpx和px

微信小程序规定了特有的尺寸单位“rpx”。
原理是无视设备原有尺寸，将所有设备的屏幕宽度统一规定为750rpx。
比如，iPhone6的屏幕宽度像素为：375px，那么在iPhone6下，1rpx = 0.5px。
由于iPhone6的屏幕宽度与微信开发时的屏幕宽度换算为简单的1:2关系，所以实际开发时一般都使用iPhone6屏幕环境进行模拟开发。

1.2 vw和vh

vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。

• 小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
• 小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh

2. 样式。

xsss样式和css样式的语法和运作方式非常相似，如果有css基础，xsss样式非常好理解。

2.1 样式写法。

和css一致：

class样式：.className{/*样式内容*/}
元素样式：elementName{/*样式内容*/}
内联样式：<element style="/*样式内容*/" />

2.2 常用属性。

基本上也和css一致：

color，font-size，background-color，border，width，height

2.3 样式导入。

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径。

3. Flex布局

微信小程序使用Flex布局。
有关Flex布局的详细说明请见：http://www.moonlightgate.com/archives/319