【小程序语法】详解 WXSS

🍳作者：$贤蛋大眼萌，一名很普通但不想普通的程序媛$🤳

🙊语录：$多一些不为什么的坚持$

📝本文章收录于专栏：小程序从0到放飞自我

🧵 小程序的样式写法

​ 小程序的样式写法跟我们熟悉的CSS一样，也是有三种写法：行内样式、页面样式、全局样式，并且这三种写法都可以作用于页面组件。

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

优先级依次是：行内样式 > 页面样式 > 全局样式

全局样式与局部样式:

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

💍 WXSS支持的选择器

💼 WXSS优先级

从左往右优先级一次减少。

一般非特殊场景需要，不推荐随便加 ！importan

🧢 wxss的扩展 - 尺寸单位

​ rpx（responsive pixel）: 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

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