WXSS:微信小程序版CSS

冷不防 2021-09-07 18:50 416阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

*  尺寸单位
 *  样式导入

## 3.8.1 尺寸单位 ##

*  rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

<table> 
 <thead> 
  <tr> 
   <th align="left">设备</th> 
   <th align="left">rpx换算px (屏幕宽度/750)</th> 
   <th align="left">px换算rpx (750/屏幕宽度)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">iPhone5</td> 
   <td align="left">1rpx = 0.42px</td> 
   <td align="left">1px = 2.34rpx</td> 
  </tr> 
  <tr> 
   <td align="left">iPhone6</td> 
   <td align="left">1rpx = 0.5px</td> 
   <td align="left">1px = 2rpx</td> 
  </tr> 
  <tr> 
   <td align="left">iPhone6 Plus</td> 
   <td align="left">1rpx = 0.552px</td> 
   <td align="left">1px = 1.81rpx</td> 
  </tr> 
 </tbody> 
</table>

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

**注意：** 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

案例：

<view style="width:375rpx;height:300rpx;border:1px solid black">测试RPX</view>
    <view style="width:162px;height:300px;border:1px solid black">测试PX</view>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-chfGxxkS-1621056443369)(image-20210510182208341.png)\]][img-chfGxxkS-1621056443369_image-20210510182208341.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6JbYM8Do-1621056443376)(image-20210510182255452.png)\]][img-6JbYM8Do-1621056443376_image-20210510182255452.png]

我们发现，用rpx各种机型是等比例缩放的，但是px的话 就是固定的宽度了。

## 3.8.2 样式导入 ##

使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的**相对路径**，用`;`表示语句结束。

**示例代码：**

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

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

## 3.8.3 内联样式 ##

框架组件上支持使用 style、class 属性来控制组件的样式。

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

*  class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上`.`，样式类名之间用空格分隔。

## 3.8.4 选择器 ##

目前支持的选择器有：

<table> 
 <thead> 
  <tr> 
   <th align="left">选择器</th> 
   <th align="left">样例</th> 
   <th align="left">样例描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">.class</td> 
   <td align="left"><code>.intro</code></td> 
   <td align="left">选择所有拥有 class=“intro” 的组件</td> 
  </tr> 
  <tr> 
   <td align="left">#id</td> 
   <td align="left"><code>#firstname</code></td> 
   <td align="left">选择拥有 id=“firstname” 的组件</td> 
  </tr> 
  <tr> 
   <td align="left">element</td> 
   <td align="left"><code>view</code></td> 
   <td align="left">选择所有 view 组件</td> 
  </tr> 
  <tr> 
   <td align="left">element, element</td> 
   <td align="left"><code>view, checkbox</code></td> 
   <td align="left">选择所有文档的 view 组件和所有的 checkbox 组件</td> 
  </tr> 
  <tr> 
   <td align="left">::after</td> 
   <td align="left"><code>view::after</code></td> 
   <td align="left">在 view 组件后边插入内容</td> 
  </tr> 
  <tr> 
   <td align="left">::before</td> 
   <td align="left"><code>view::before</code></td> 
   <td align="left">在 view 组件前边插入内容</td> 
  </tr> 
 </tbody> 
</table>

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

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

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[img-chfGxxkS-1621056443369_image-20210510182208341.png]: /images/20210716/fbea1f4b612e43539b572f00906139ea.png
[img-6JbYM8Do-1621056443376_image-20210510182255452.png]: /images/20210716/ec700ec4868f49c98263bfef43e187c9.png