微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)

上一篇讲了WXML:小程序版HTML，这一篇介绍WXSS:小程序版CSS。

1. WXSS:小程序版CSS。

WXSS是一套样式语言，为了便于前端开发的上手，WXSS同HTML的CSS样式文件大部分特性一样。它用来决定WXML的样式，同时在CSS基础上进行了修改扩充。 其中扩展属性有尺寸单位、样式导入。

1.1.尺寸单位

1.1.1 介绍

rpx 可以根据屏幕宽度进行自适应。 与px的换算关系，下图可以看出不同的手机型号，px与rpx之间换算关系是不一样的，官方建议使用iPhone6作为视觉稿的标准

1.1.2 使用案例

<view style="width:375rpx;height:300rpx;border:1px solid black">测试RPX</view>

<view style="width:162px;height:300px;border:1px solid black">测试PX</view>
复制代码

iPhone5机型

iPhone6机型 由此可以看出rpx是根据机型等比例缩放的，而px是固定大小的。因此机型的适应性上建议使用rpx。

1.2.样式导入

1.2.1介绍

看官文描述使用@i