微信小程序开发入门教程（七）

背景

前两篇文章我们学习了WXML的相关内容，了解了WXML的数据绑定、条件渲染、列表渲染、模版和事件，这些已经基本涵盖理WXML所能提供的全部能力。然而WXML与我们直接交互的微信小程序页面还有一定的距离，正如之前所提到的，其主要用于定义页面的结构，就如同还未装修的毛坯房，还需要WXSS去进一步美化，确定颜色和线条等.

WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式，WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

尺寸单位

CSS中原有的尺寸单位不能在不同尺寸的屏幕中完美实现元素的按比例缩放，所以WXSS在此基础上扩展了尺寸的单位rpx(responsive pixel)，rpx是相对单位，最终会被换算为px，使用rpx布局页面能让页面在不同尺寸的屏幕中按比例缩放。

rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素，换算如下表：

设备	rpx换算px (屏幕宽度/750)