微信小程序（WXSS样式文件）WXSS介绍

介绍：

WXSS（）是一种针对小程序的样式语言，用于描述WXML的组件样式，即视觉效果。

比较的：

WXSS类似于Web开发中的CSS，为了更加适合小程序开发，WXSS对CSS做了一些添加和修改。

WXSS决定了WXML组件的显示风格。

为了适应广大前端开发人员，WXSS 拥有了 CSS 的大部分特性。同时，为了更加适合微信小程序的开发，WXSS 对 CSS 进行了扩展和修改。

WXSS与CSS相比，有以下扩展特点：

测量单位

样式导入

WXSS 分类

小程序内的样式文件分为两级/类别：

提供了全局样式和本地样式，概念和前面的app.json、page.json一样，可以写一个app.wxss作为全局样式，会作用于当前小程序所有页面，本地页面样式page.wxss只对当前页面有效。

小程序全局样式app.wxss，又叫页面公共样式，会注入到小程序各个页面中，页面样式page.wxss，即单个页面的样式

注意：WXSS 仅支持部分 CSS 选择器。

WXSS 尺寸单位

在WXSS中，引入了rpx（响应像素）尺寸单位。

引入新尺寸单位的目的是为了适配不同宽度的屏幕，让开发更加简单。

场景：对于同一个元素，如果在不同宽度的屏幕上都以px作为尺寸单位，可能会导致页面留白过多，如下图所示。

如果将尺寸单位改为rpx，则如下

原理：-----移动端—2次——

小程序编译完成后，rpx会转换为px，转换是以375个物理像素为基准的，也就是说，在宽度为375个逻辑像素的屏幕上，1rpx=1px。

对于具体的适配和像素问题，请参阅下一节“物理像素和逻辑像素”

WXSS 样式导入

微信小程序可以使用@语句引入外部样式表

@后面跟着需要导入的外部样式表的相对路径，以；结尾。

①定义通用样式

② 导入

③结果

WXSS 内联样式

小程序框架组件支持使用属性控制组件的样式

：静态样式统一写入 ，动态样式在运行时接收并解析，尽量避免将静态样式写入 ，以免影响渲染速度。

渲染结果：

WXSS 选择器

目前WXSS支持的选择器如下

开发工具设置

（1）上传代码时自动补全

小程序需要兼容iOS 8以下版本，并且需要开启自动样式补全，在“设置”-“项目设置”-勾选“上传代码时自动样式补全”。

（2）未核实域名合法性

设置完成后你就可以在微信开发者工具里随意访问了，此时可以使用:/，这个地址是没有安全链接地址的。

总结

（1）尺寸（单位：px）

（2）样式 @

（3）内联样式

（4）全局风格与局部风格

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