四.微信小程序WXS

向右看齐 2023-07-03 06:03 34阅读 0赞

### 文章目录 ###

*   *  一. 微信小程序 WXSS
     *   *  1.尺寸单位
         *  2.样式导入
         *  3.内联样式
         *  4.选择器
         *  5.全局样式和局部样式

## 一. 微信小程序 WXSS ##

### 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>

### 2.样式导入 ###

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

/** app.wxss **/
    @import "index.wxss";
    p{ 
        color: red;
    }

### 3.内联样式 ###

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

*  **style**: 静态的样式统一写到class中. style接受动态的样式, 在运行时会进行解析, 请尽量避免将静态的样式写进style中, 以免影响渲染速度.
    
        <view style="color:{ { color}};"/>
    
        Page({ 
            data:{ 
                color: red;
            }
        })
 *  **class**: 样式名之间用空格分隔.
    
        <view class="normal_view" />

### 4.选择器 ###

目前支持的选择器有:

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

### 5.全局样式和局部样式 ###

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