微信小程序06-开发框架之WXSS

一、响应式像素

WXSS: 决定了小程序的界面样式，他和CSS很类似，是在CSS基础上进行补充和修改。

接下来看下WXSS 修改了CSS 上的那些东西？

rpx: 响应式的像素
CSS pixels: 逻辑像素
PPI/DPI: 每英寸所拥有的像素数目
DPR:手机在某一方向上的设备像素和CSS像素之比

小程序推出的rpx，它规定了屏幕宽度是750个rpx,从而根据屏幕宽度进行自适应

二、外联样式

外联样式的导入：用@import 导入，不同页面内，具有相同样式的元素时，将他们抽取成一个外联样式文件，以减少我们文件的一个资源大小。

通过以下例子看下怎样通过import导入外联样式。

index.wxml
定义了class为container 的view标签

index.wxss
@import + 外联样式路径
@import ‘./assets.wxss’;
定义container 的一个颜色为红色

assets.wxss
在外联文件定义了边框
样式文件执行是有顺序的，从上到下，从左到右。

三、内联样式引入

通过style属性来表示view标签的内联样式，在style属性里面，我们可以写入width…

所以我们通常把静态样式写在class属性中，动态属性样式写入style中。

四、选择器：

选择器是用于选择你想要的元素的样式的一种模式。

前面的class 只是选择器的一种。view标签里面直接用id表示的，element可以直接在样式文件中写入页面元素对应的标签名，就可以选择到我们页面上的元素，对它样式的定义。after,before 跟在选择器后面进行声明的。它可以把我们选择器选择的元素在前面或后面去插入我们的一些内容和样式。

不同的选择器类型有不同的权重值，所以他们也有优先级。

element 1
class 10
id 100
style 1000
important 不算选择器，只是将选择器的权重提升。 无穷。

如果在样式中声明了important规则时，这个规则覆盖所有的任何声明。所以它的权重最高，需要小心。如果使用别人小程序插件，想修改插件对应的元素里面的样式，可以在引入插件的外层引入important,来直接修改。例子看图片右上代码