视图层WXSS--尺寸单位--样式导入--内联样式--全局/局部样式

WXSS用于描述WXML的组件样式，具有大部分CSS特性，同时为适应微信小程序开发对CSS进行了扩充以及修改。
与CSS相比扩展特性有：尺寸单位、样式导入。

1. 尺寸单位
   WXSS拥有针对屏幕的两种尺寸单位：rpx、rem。
   rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。
   如果在iphone6上，屏幕宽度为375偶像，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。

设备	rpx换算px（屏幕宽度/750）	px换算rpx（750/屏幕宽度）
iphone5	1rpx=0.42px	1px=2.34rpx
iphone6	1rpx=0.5px	1px=2rpx
iphone6s	1rpx=0.552px	1px=1.81rpx

rem(root em):规定屏幕宽度为20rem;1rem=(750/20)rpx。因此建议，开发微信小程序时设计师可以用iphone6作为视觉稿的标准。在较小的屏幕上可以避免一些毛刺，开发中尽量避免这样情况。

2.样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用“：”表示语句结束，代码如下：

/**common.wxss**/
.small-p{
    padding:5px;
    }


/**app.wxss**/
@import "common.wxss";
.middle-p{
    padding:15px;
    }

3 . 内联样式：
MINA组件上支持使用style、css属性来控制组件的样式。
style：静态的样式统一写到class中。style接收动态的样式，在运动时会进行解析，所以不要将静态的样式写进style中，以免影响渲染速度。代码如下

<view style="color:{{color}};" />

class：用于指定样式规则，其属性值是样式规则中类选择器命（样式名）的集合，样式类名不需要带上“.”，样式类名之间用空格分隔。比如normal_view样式类的使用：

<view class="nomal_veiw" />

4 . 全局样式与局部样式
定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用于对应的页面，并会覆盖app.wxss中相同的选择器。

选择器	样例	样式描述
.class	.intro	选择所有拥有class=”intro”的组件
id	firstname	选择所有拥有id=”firstname”的组件
element	view	选择所有拥有view组件
element,element	view checkbox	选择所有文档的view组件和所有的 checkbox组件
::after	view::after	在view组件后边插入内容
::befor	veiw::befor	在view组件前边插入内容