(一) 尺寸问题
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
其实和原来的 CSS 没差特别多，不过先说一个挺重要的点，就是微信小程序官方提供的一种，解决尺寸问题的方案 rpx
例如设计师给你的设计稿是px为单位的，但是如果你直接使用这样固定的写法，就会导致在不同的机型上，出现内容尺寸比例不一的现象，当然我们也可以使用百分比来解决这个问题，而今天我们简单说一说 rpx
(1) 存在的问题
首先我们，随便写一个 200px * 200px 的方框
代码语言：javascript复制view{
width: 200px;
height: 200px;
background-color: deeppink;
}在不同的机型下，实际上大小可以说写死了，在其他机型下，很清晰就可以看到，右边的留白，发生了很大的变化
（下图为 750 * 550 自定义的）
(2) 尺寸单位
- rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有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 |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况
知道了这些，接着看上面的问题，首先，1px=rpx*(750/设备屏幕宽度)，因为原型图我们以iphone6为标准，所以公式就是1px=rpx*(750/375)，所以1px=2rpx，这也对应了上面的表格，所以我们只需要将原来固定的 200px 修改一下，成为 400rpx，这样就会发现方框就会根据不同屏幕的尺寸来变化了
(3) 总结
使⽤步骤：
- 确定设计稿宽度 pageWidth
- 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth
- 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可
(二) 引入样式
刚才，我们简单说了一下比例尺寸的问题，在同一个页面下的 样式文件，是不需要引入的，也就是说 例如 test 文件夹下的 test.wxml 中就可以自动匹配上 test.wxss 中的样式
但是，如果想自定义一些样式供多个页面使用，怎么做呢，例如我们在根目录下创建一个文件夹，在其中创建一个名为 commom.wxss 的样式文件，为了效果显著一些，把字体改一下样式
代码语言：javascript复制view{
color: red;
font-size: 30px;
}我们在需要页面的 WXSS 中引入一下
注：路径只能写相对路径哈
代码语言：javascript复制@import"../../styles/common.wxss";效果一下就显出来了
(三) 选择器
(1) 支持的选择器：
选择器 | 样例 | 样例描述 |
|---|---|---|
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #firstname | 选择拥有 id="firstname" 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容 |
::before | view::before | 在 view 组件前边插入内容 |
注意：通配符 * 是不支持的，即下列代码是无效的
*{
margin:0;
padding:0;
box-sizing:border-box;
}(2) 全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
(四) 原生小程序使用 less 的方法
原生的小程序是不支持使用 less 的，当然了，你可以选择直接写样式，如果想要使用 less 的话，可以在 vscode 中安装例如 Easy LESS插件（此插件需要在 vscode 配置中加入）
"less.compile": {
"outExt": ".wxss"
},在编写样式的地方，直接新建 less 文件，例如 test.less 编辑保存后，会生成对应的WXSS文件
