框架视图层（四）

wxss

此性能是对css的扩展

• 尺寸单位
  • rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
• 样式导入
  • 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

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

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

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