【微信小程序】框架wxss（一）wxss概述

今天简单记录一下wxss的使用方法。

1.WXSS(WeiXin Style Sheet) 用于描述页面的样式。wxss基本沿用了css的特性，新增了两点内容：

（1）尺寸单位：

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

（2）内联样式：

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

我们在wxml中引用的样式，应该在wxss中进行定义。

①在app.wxss中定义的样式作用于全局

②在page对应的wxss中定义的样式作用于对应的page

2.选择器

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

（1）.class

在wxss.wxml中写一个button1

<button class="button1">button1</button>

我们在wxss.wxss中定义button1

.button1{
  margin: 10px;
  background: #22bfee
}

看下效果↓

（2）#id

在wxml中写两个button button2和button3，均采用class="button2"样式

<button class="button2">button2</button>
<button id="button3" class="button2">button3</button>

wxss↓，

.button2,view{
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background: #ee22ff
}

#button3{
  background: greenyellow
}

看下效果图

button3虽然采用了button2的样式，但是颜色并不是#ee22ff（玫粉色），而是greenyellow，这是因为#button3选择了id为button3的组件，将其background更改。

（3）element

更新wxml，加入三个button

<button>buttonOne</button>
<button>buttonTwo</button>
<button>buttonThree</button>

wxss中，对button的样式进行定义，对所有class样式的button均有效

注意：button前面没有小点点

button{
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background: #dddddd
}

看下效果图，button1、button2和button3并没有受到影响，而没有定义样式的buttonOne、buttonTwo和buttonThree样式均由button进行定义。

（4），（与的作用）

wxml定义组件

<view style="border:3px solid #000">view</view> 
<button>buttonOne</button>
<button>buttonTwo</button>
<button>buttonThree</button>

wxss中，button与view共用一组样式

button,view{
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background: #dddddd
}

效果图↓

（5）::after与::before，以::after为例

在wxss中定义↓

view::after{
  content: 'after'
}

看下view的效果，在原view后追加了“after”字符，before加前缀

3.内联样式，框架组件上支持使用 style、class 属性来控制组件的样式。

4.分享一个css参考手册：http://www.css88.com/book/css/properties/flexible-box/index.htm

晚安，周末愉快。