微信小程序WXSS样式介绍

在微信小程序开发中，需要用到一种微信自己推出的一套样式语言——WXSS（WeiXin Style Sheets），它用于描述WXML的组件样式，也就是说用来决定WXML的组件应该怎么显示。那么今天小程序观察网小编就和各位开发者一起聊聊微信小程序WXSS样式语言。

开发者开发微信小程序，需要对小程序的界面进行排版，此时就要用到WXML和WXSS了。WXML指定了界面的框架结构，而WXSS起到的作用就是指定界面的框架及元素的显示样式。

按照微信官方的介绍，WXSS具有CSS的大部分特性，并且在CSS的基础上进行了扩充和修改，以适合广大的前端开发者开发微信小程序。CSS的特性和使用方法想必开发朋友都清楚，这里就不介绍了。既然官方说WXSS具有CSS的大部分特性，那就说明还是有部分是不同的，小编就来整理一下哪些地方不同。

差别一：没有body

小程序的每一个page里都没有body属性，要想影响整个页面的样式可以通过在WXSS中对page进行设置来实现。

差别二：尺寸变化

在CSS里衡量尺寸的单位有很多，比如px、em等，而WXSS里除了这些外，还新增了一个单位：rpx。它最重要的特性是可以根据屏幕宽度进行自适应，毕竟小程序作为在移动端展现需要适配各种规格的移动设备。官方介绍，规定屏幕宽为750rpx，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

差别三：样式导入

小程序WXSS支持样式的导入，比如我们使用一些其他库的时候就可以直接导入第三方的WXSS文件，这是一个相当有用的功能。

差别四：内联样式

WXSS和CSS一样支持class和style两种样式，但用法上有一些区别。按照官方的说法概括为：样式中存在动态内容，就写道style中，其他的都放到class文件。

差别五：选择器

如官方介绍，WXSS基本支持CSS中的选择，而且类似于last-child之类的css的高级属性，也可以在WXSS中使用。

差别六：全局样式与局部样式

在小程序中，一般一个WXSS负责一个WXML视图文件，但一个应用难免会有一些共用的属性，所以小程序为应用自身提供了一个WXSS—app.wxss，它不用人工引入，会自动的加载到每一个视图上。

总之，小程序样式语言WXSS具有了CSS大部分属性，而且还拓展了尺寸单位和样式导入等特性，更适合开发微信小程序。对于熟悉CSS的开发者来说WXSS上手并没有太大难度，当然更多的细节差别还有待开发朋友们多挖掘探索。