微信小程序之wxss：微信小程序教程系列13

我不是女神ヾ 2021-12-04 08:09 521阅读 0赞

WXSS（WeiXin Style Sheet）与CSS对应，用于描述页面的样式。

### 特性 ###

内联样式：  
组件的 style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。  
  
  
选择器  
对于常用的选择器，目前支持的选择器有：

![20170522141224463][]

注：绿色背景色行表示官方文档中没有说明，但经个人亲测后确定也支持的选择器。  
  
  
目前不支持的选择器有：

![20170522141348288][]

注意：  
如之前提到，页面的顶层是节点，所以作用于整个页面的样式或修改顶层节点样式请使用page选择器。  
小程序目前不支持Media Query。

### **扩展的特性** ###

![20170213162849850][]

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

注意： 由于数值较小时渲染时会存在四舍五入的情况，在较小屏幕上差距会很大，所以要求精确而较小的视图内容需避免使用此单位。

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

示例：

**index.wxml：**  
![20170213162905397][]

**index.wxss：**

![20170213162917381][]

运行：

选择iphone 4手机查看

![20170213162930319][]

选择iphone 6 Plus手机查看

![20170213162952204][]

[20170522141224463]: /images/20211204/69ecaa6d53a14a6f938100e3a50c1964.png
[20170522141348288]: /images/20211204/f99932e1d8524618a453ba9621c97471.png
[20170213162849850]: /images/20211204/cf41c2ad354f4658b7eff33f6f3eedaa.png
[20170213162905397]: /images/20211204/9de82758d3764a4fbe4096e3a8dcbf82.png
[20170213162917381]: /images/20211204/7e423134918b4194be9517b6e225a4ea.png
[20170213162930319]: /images/20211204/209ff36fc26f4c33b697020f17f8e1f0.png
[20170213162952204]: /images/20211204/b63ae1bd31934a42a54261d7a50eafb2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，521人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序---wxss模板样式

微信小程序day02 学习笔记 wxss模板样式--介绍 wxss简介 wxss和css的关系 wxss模板样式--rpx

ゞ浴缸里的玫瑰/ 2023年10月07日 19:16/ 0 赞/ 97 阅读

相关微信小程序（WXSS样式文件）

课程大纲（1）WXSS简介（2）分类（3）尺寸单位rpx （4）样式导入@import （5）style内联样式（6）WXSS

桃扇骨/ 2023年06月15日 09:47/ 0 赞/ 38 阅读

相关微信小程序（WXSS样式文件）

【本节大纲】（1）WXSS简介（2）分类（3）尺寸单位rpx （4）样式导入@import （5）style内联样式（6）WXSS选择器（

梦里梦外;/ 2023年06月15日 09:44/ 0 赞/ 39 阅读

相关 6.微信小程序（WXSS样式文件）+微信小程序（WXSS选择器）

微信小程序（WXSS样式文件）+微信小程序（WXSS选择器）微信小程序（WXSS样式文件）：大纲（1）WXSS简介（2）分类（3）尺寸单位rpx

╰半夏微凉°/ 2023年06月15日 07:25/ 0 赞/ 33 阅读

相关微信小程序教程系列

微信小程序教程系列相关连接：[http://blog.csdn.net/michael\_ouyang/article/details/54700871][http_

逃离我推掉我的手/ 2023年01月22日 09:00/ 0 赞/ 263 阅读

相关微信小程序wxss设置样式

[微信小程序wxss设置样式][wxss] 对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来一、wxml 界面结构wxmL

ゝ一纸荒年。/ 2022年01月31日 03:25/ 0 赞/ 1414 阅读

相关微信小程序之wxss：微信小程序教程系列13

WXSS（WeiXin Style Sheet）与CSS对应，用于描述页面的样式。特性内联样式：组件的 style 接收动态的样式，在运行时会进行

我不是女神ヾ/ 2021年12月04日 08:09/ 0 赞/ 522 阅读

相关微信小程序之微信登陆：微信小程序教程系列20

简介：微信登陆，在新建一个微信小程序Hello World项目的时候，就可以看到项目中出现了我们的微信头像，其实这个Hello World项目，就有一个简化版的微信登陆。只

喜欢ヅ旅行/ 2021年12月03日 14:17/ 0 赞/ 814 阅读

相关微信小程序之组件：微信小程序教程系列19

什么是组件：组件是视图层的基本组成单元。组件自带一些功能与微信风格的样式。一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。 <t

迈不过友情╰/ 2021年12月03日 13:51/ 0 赞/ 566 阅读

相关 WXSS:微信小程序版CSS

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组

冷不防/ 2021年09月07日 18:50/ 0 赞/ 497 阅读