微信小程序样式 WXSS

样式基础

与 CSS 相比，WXSS 扩展的特性有： 尺寸单位 / 样式导入

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。 不管屏幕的实际宽度有多大 , 规定他的屏幕宽为750rpx。

rpx计算步骤

1. 先确定设计稿的总宽度,假定为:pagewidth
2. 计算比例, 设750 rpx = pagewidth px , 得 1px = 750 / pagewidth rpx
3. 把设计稿中的所有px 换算成 rpx单位即可

样式导入

wxml中导入 在小程序的wxml文件中引入wxss样式,不用使用类似web的link标签引入 只要名字一样,小程序自动引入

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

1. 引入的代码只能通过@import来引入
2. 只能写相对路径

/** app.wxss **/

@import "../../styles/common.wxss"

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。 尽量将动态的样式写在style中,将静态的样式写在class中 style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

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

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

<view class="normal_view" />

选择器

小程序不支持通配符 * 如下面的这个就是错误的

*{
          
   
    margin:0;
    padding:0;
}

想要适应多个的正确写法:

image, view , .class{
          
   
    margin:0;
    padding:0;
}

小程序目前支持的选择器:

less语法

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

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

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

拓展: