微信小程序样式 WXSS

样式基础

类似于web里面的css
WXSS 用来决定 WXML 的组件应该怎么显示。
WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有： 尺寸单位 / 样式导入

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。
不管屏幕的实际宽度有多大 , 规定他的屏幕宽为750rpx。

rpx计算步骤

1. 先确定设计稿的总宽度,假定为:pagewidth
2. 计算比例, 设750 rpx = pagewidth px , 得 1px = 750 / pagewidth rpx
3. 把设计稿中的所有px 换算成 rpx单位即可

样式导入

wxml中导入
在小程序的wxml文件中引入wxss样式,不用使用类似web的link标签引入
只要名字一样,小程序自动引入

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

1. 引入的代码只能通过@import来引入
2. 只能写相对路径

/** app.wxss **/

@import "../..