小程序的样式写法
小程序的样式写法跟我们熟悉的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 作为视觉稿的标准。