小程序——WXSS

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

尺寸单位

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

概念理解：

物理像素（device pixel）：设备的实际分辨率，也叫设备像素或绝对像素，用 px 表示一个像素点单位。

同样的面积上，手机的像素要比 PC 显示器密集好几倍，如果在设计中用相同的像素则在手机屏幕上的字相比就会显得小好几倍〜

解决方法就是用多个像素来显示一个逻辑像素：逻辑分辩率=物理分辩率/设备像素比（手机上主要使用逻辑分辩率）

设备像素比：普通桌面显示吕是我，主流手机显示屏是2或3，rpx 尺寸单位属于逻辑分辩率的概念。

逻辑分辩率（像素）的应用

iPhone5 使用的是 Retina 视网腊屏幕，设备像素比是2，也就是 1px 的 CSS 逻辑像素 = 2rpx 物理像素。

计算：iPhone5（物理）像素是 640*1136 ，而它的 CSS 逻辑像素为 320*568px

微信对 CSS 像互的规范（以 iPhone6 作为视觉稿的参考标准）

特别注意

字体大小数值与单位（ px 或 rpx ）之间不能有空格，否则系统会报错。

例：

规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

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

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

可以看到下面一个是 30px ，一个是 30rpx ，但它们在模拟器里显示的字体是不一样大的。

样式与选择器

样式导入

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

如果我们需要（在 index.wxss 里）引入 logs.wxss 里的样式时就可以这样写

@import"../logs/logs.wxss";

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式

style ：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

如：

class ：用于指定样式规则，其属性值是样式规则中类选择器名（样式类名）的集合，样式类名不需要带上，样式类名之间用空格分隔。

如 ：

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

小程序目前支持的选择器

Flex布局

Flex 是 Flexible Box 的缩写，即为弹性盒子布局。

2009年 W3C 提出了一种新的方案 Flex 布局，该布局可以简单快速地完成各种伸缩性设计，可以为传统盒子模型带来更大的灵活性。就是 Flex 。

Flex 布局主要由容器和项目构成，采用 Flex 布局的元素，称为 Flex 容器（flex container），它的所有直接子元素自动成为容器的成员，成为 Flex 项目（flex item）。

容器默认存在两个轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴开始的位置（及主轴与边框的交叉点）叫 main start ，结束的位置叫 main end ，main start 和 main end 和主轴的方向有关；

交叉轴开始的位置叫 cross start ，结束的位置叫 cross end ，cross start 和 cross end 和交叉轴方向有关。

项目默认沿主轴开始的位置到主轴结束的位置进行排列。

项目在主轴上占据的空间叫 main size ，在交叉轴上占据的空间叫 cross size。

PS：

这一期如果看不太懂的小伙伴建议先去查查 CSS 相关教程。