WXSS是一套样式语言,用于描述WXML的组件样式,与CSS相比,WXSS扩展的属性有:
- 响应式长度单位
rpx
- 样式导入
尺寸单位
rpx
:可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx.如果在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750个物理像素,1rpx=0.5px=1物理像素
这里只需要记住一个公式就可以了:即px→rpx
如果设计稿是375px的,里面的某个元素是100px的
那就写成:
width:calc(750rpx*100/375)
注意:
- 750和rpx之间不能出现空格,否则会报错
- 运算符的两侧也不能出现空格,否则也会报错
view{
width: calc(750rpx*100/375);
height: calc(750rpx*100/375);
background-color: #ffaa7f;
}
样式导入
wxss中直接就支持样式导入功能
也可以和less中的导入混用
使用@import
语句可以导入外联样式表,但是只支持相对路径
这里先创建一个文件,并在里面写入一个.wxss文件
接下来进行导入(不要忘记后面的分号;
)
选择器
这里需要特别注意的是:小程序不支持通配符*
,因此以下代码是无效的
*{
margin:0;
padding:0;
box-sizing:border-box;
}
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有class="intro"的组件 |
#id | #firstname | 选择所有拥有id="firstname"的组件 |
element | view | 选择所有的view组件 |
element,element | view,text | 选择所有文档的view组件和所有的text组件 |
nth-child(n) | view:nth-child(n) | 选择某个索引的标签 |
::after | view::after | 在view组件后面插入内容 |
::before | view::before | 在view组件前面插入内容 |
小程序中的less
原生小程序不支持less,其他基于小程序的框架大体都支持,但是仅仅因为一个less功能,而去引入一个框架,肯定是不可取的.
如果想要使用,可以使用其他方式,具体的可以百度。