微信小程序-6-样式选择器

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)

注意:

1. 750和rpx之间不能出现空格,否则会报错
2. 运算符的两侧也不能出现空格,否则也会报错

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功能,而去引入一个框架,肯定是不可取的.

如果想要使用,可以使用其他方式,具体的可以百度。