微信小程序学习（13） —— wxss

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

 

特性


内联样式：
组件的 style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。


选择器
对于常用的选择器，目前支持的选择器有：

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



目前不支持的选择器有：

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

 

 

 

 

扩展的特性

 

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

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

 

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

 

 

示例：

index.wxml：

 

index.wxss：

运行：

选择iphone 4手机查看

选择iphone 6 Plus手机查看

 

内容转自：https://blog.csdn.net/michael_ouyang/article/details/55050052