# 7.样式WXSS

WXSS ( WeiXin Style Sheets WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。与CSS相⽐，WXSS扩展的特性有：

响应式⻓度单位 rpx
样式导⼊

1.尺⼨单位(⭐⭐⭐)
2.样式导⼊
3.选择器
4.⼩程序中使⽤less

# 1.尺⼨单位(⭐⭐⭐)

rpx （responsivepixel）:可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 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
iPhone6Plus	1rpx=0.552px	1px=1.81rpx

建议：开发微信⼩程序时设计师可以⽤iPhone6作为视觉稿的标准

使⽤步骤： 1.确定设计稿宽度pageWidth

2.计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth。

3.在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

1.小程序中, 不需要主动来引入样式文件 
2.需要把页面中某些元素的单位 由 px 改成 rpx
  1.设计稿 750px
    750px = 750 rpx
    1px = 1rpx
  2.把屏幕宽度 改成 375px
    375px = 750rpx
    1px = 2rpx
    1rpx = 0.5px
3.存在一个设计稿 宽度 414 或者 未知 page
  1.设计稿 page 存在一个元素 宽度 100px
  2.拿以上的需求 去实现 不同宽度的页面适配

  page px = 750rpx

  1px = 750rpx / page  // 尺寸计算公式

  100 px = 750rpx * 100 / page
  假设 page = 375px
4.利用 一个属性 calc属性 css和wxss 都支持   见下(⭐⭐⭐)
  1.750 和 rpx 中间不要留空格
  2.运算符的两边也不要留空格
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

css样式

view {
  /* width: 200rpx; */
  height: 200rpx;
  font-size: 40rpx;
  background-color: aqua;
  /* 以下代码写法是错误的 */
  /* width: 750rpx * 100 / 375; */
  width: calc(750rpx * 100 / 375);
}

1
2
3
4
5
6
7
8
9

# 2.样式导⼊

wxss中直接就⽀持，样式导⼊功能。也可以和less中的导⼊混⽤。使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。⽰例代码：

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

1
2
3
4

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

1
2
3
4
5

# 3.选择器

特别需要注意的是⼩程序不⽀持通配符 * 因此以下代码⽆效！

*{    
  margin:0;    
  padding:0;    
  box-sizing:border-box; 
}

1
2
3
4
5

⽬前⽀持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有class="intro"的组件
#id	#firstname	选择拥有id="firstname"的组件
element	view	选择所有 view 组件
element,element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
nth-child(n)	view:nth-child(n)	选择某个索引的标签
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

# 4.⼩程序中使⽤less

原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都⽀持，如 wepy ， mpvue ， taro 等。但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现 1.编辑器是 vscode

2.安装插件 easy less

3.在vscode的设置中加⼊如下，配置

"less.compile": {       
   "outExt":  ".wxss"    
 }

1
2
3

4.在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。

← 6.⼩程序事件的绑定 8.常⻅组件 →