微信小程序---小程序样式WXSS

前言

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。

与 CSS 相⽐，WXSS 扩展的特性有：

1. 响应式⻓度单位 rpx

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

假设我们在实际生活中拿到一个未知宽度(设为page px)的设计稿，设计稿page存在一个元素宽度100px,我们该如何进行转化。
[1] 转化
page px = 750rpx
1px = 750rpx /page
100 px = 750rpx * 100 /page
假设 page = 375px
[2] 赋值
进行相应值编写时,不能直接使用 750rpx * 100 /375
得利用一个属性 calc属性（css 和 wxss都支持的一个属性）
这个属性的语法要求:
1）750 和rpx中间不要留空格
2) 运算符两边不要留空格

wxss的内容

view{
	/*width: 200rpx;*/
	height: 200rpx;
	font-size: 40px;
	background-color: aqua;
	width:calc(750rpx * 100 /375);
}

2. 样式导⼊

[1] WXML文件的样式默认是根据它前面的名字获取的,
[2] 引入自定义样式时，可以通过**@import来引入,路径只能写相对路径**

样式文件

WXSS文件

 @import "../../style/common.wxss";

3.选择器

特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

目前支持的选择器有: