浅谈小程序的样式机制，单位换算

野性酷女 2022-04-23 12:30 146阅读 0赞

###  ###

*   *  WXSS和CSS之间的不同之处
     *   *  样式的设置
         *  新的尺寸单位 rpx
         *  有限的选择器
         *  全局样式与局部样式

## WXSS和CSS之间的不同之处 ##

小程序的开发框架采用了与Web开发中所使用的CSS（层叠样式表）几乎相同的一种机制，称作WXSS(weiXin Style Sheets）。

WXSS用于描述WXML的组件样式，引入了一种新的尺寸单位rpx。  
文档里说扩展的特性还有 样式导入，这个CSS里也是支持的。

/*引入样式表的相对路径*/
    @import "common.wxss";

### 样式的设置 ###

框架组件上支持使用 style、class 属性来控制组件的样式。  
因为WXML支持数据绑定，所以style和class可以通过数据绑定来动态改变。

**style**：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

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

**class**：样式类名不需要带上.，样式类名之间用空格分隔。

### 新的尺寸单位 rpx ###

*  rpx (responsive pixel，响应式px)，不管什么尺寸的设备，总是认为屏幕宽度是750rpx
 *  rem (root em，根em)，不管什么尺寸的设备，总是认为屏幕的宽度是20rem。

所以rpx和rem之间的换算，就是：

1rem = (750/20)rpx = 37.5rpx

因此，如果设计师的设计是以iphone6屏幕尺寸为参照(iphone6的屏幕宽度为375px)，则：

1rpx = (375/750)px = 0.5px
    1px = (750/375)rpx = 2rpx

### 有限的选择器 ###

和CSS不一样，小程序的WXSS支持的选择器的类型有限，官方文档中明确列出说支持的，目前只有以下几种选择器：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>样例</th> 
   <th>样例描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.class —— 类选择器</td> 
   <td>.error-msg</td> 
   <td>选择所有class="error-msg"的组件</td> 
  </tr> 
  <tr> 
   <td>#id —— ID选择器</td> 
   <td>#my-container</td> 
   <td>选择id="my-container"的组件</td> 
  </tr> 
  <tr> 
   <td>element ——元素选择器</td> 
   <td>view</td> 
   <td>选择所有view组件</td> 
  </tr> 
  <tr> 
   <td>element, element ——多选择器</td> 
   <td>view, button</td> 
   <td>选择所有view和button组件</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td>例如view::after</td> 
   <td>在view组件后面插入内容</td> 
  </tr> 
  <tr> 
   <td>::before</td> 
   <td>例如view::after</td> 
   <td>在view组件前面插入内容</td> 
  </tr> 
 </tbody> 
</table>

### 全局样式与局部样式 ###

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