# style 样式

用于描述 template 模板的组件样式，决定组件应该如何显示

样式布局采用 CSS Flexbox（弹性盒）样式，针对部分原生组件，对 CSS 进行了少量的扩充以及修改

为了解决屏幕适配问题，所有与大小相关的样式（例如 width、font-size）均以基准宽度为基础，根据实际屏幕宽度进行缩放

# 文件导入

支持 2 种导入外部文件的方式

<!-- 导入外部文件, 代替style内部样式 -->
<style src="./style.css"></style>

<!-- 合并外部文件 -->
<style>
  @import './style.css';
  .a {
  }
</style>
1
2
3
4
5
6
7
8
9

# 模板内部样式

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

<!-- 内联inline -->
<div style="color: #f00; margin: 10px;" />
<!-- class声明 -->
<div class="normal append" />
1
2
3
4

# 选择器

支持的选择器有：

选择器 样例 样例描述
.class .intro 选择所有拥有 class="intro" 的组件
#id #firstname 选择拥有 id="firstname" 的组件
tag div 选择所有 div 组件
, .a, .b 选择所有 class=“.a” 以及 class=“.b”的组件
<style>
  /* 单个选择器 */
  text {
  }
  .class-abc {
  }
  #idAbc {
  }
  /* 同一样式适应多个选择器 */
  .font-text,
  .font-comma {
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

注意，选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量，当前只支持：CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新

<template>
  <div class="{{docBody}}">
    <text class="{{rowDesc}}">描述内容</text>
  </div>
</template>

<style>
  .row-desc1 {
    color: #ff0000;
  }
  .row-desc2 {
    color: #0000ff;
  }
  .doc-body {
    color: #000fff;
  }
</style>

<script>
  export default {
    // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
    data: {
      rowDesc: 'row-desc1',
      docBody: 'doc-body'
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

以上的代码示例，当我们把rowDesc变量从row-desc1变为row-desc2时是通知 Native 更新节点样式，但是如果把docBody变量从doc-body变为doc-body2，是不会通知 DOM 更新的。

因为doc-body不是最后一个选择器，非末尾的选择器变更有可能影响很多 DOM 元素，从而影响到渲染性能

# 选择器优先级

当前样式的选择器的优先级计算保持与浏览器一致，是浏览器 CSS 渲染的一个子集（仅支持：inline, id, class, tag）

多条 CSS 声明可以匹配到同一个元素 如 div，应用在该元素上的 CSS 声明总体优先级是：inline > #id > .class > tag，这四大类匹配到该元素的多个 CSS 声明

  • ID选择器（例如: #hello）的权值为 10000

  • 类选择器（例如: .example）的权值为 100

  • 类型选择器（例如: h1）的权值为 1

css 的优先级计算文档也可以查看MDN 文档 (opens new window)入门

# 样式预编译

目前快应用支持less与sass的预编译，具体教程也可以参考这里

<!--导入外部文件, 代替style内部样式-->
<style lang="less" src="./lessFile.less"></style>

<!--合并外部文件-->
<style lang="less">
  @import './lessFile.less';

  @px: 12px;
  .less-font-text {
    font-size: @px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12

# 媒体查询 3+

媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：

1.针对设备和应用的属性信息，可以设计出相匹配的布局样式。 2.当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。

# CSS 语法规则

使用@media 来引入查询语句，具体规则如下：

@media [media-type] [and|not|only] [(media-feature)] {
  CSS-Code;
}
1
2
3

# 举例：

/* level3的写法, 表示：宽度小于30dp时生效 */
@media (max-width: 30) {
  .box {
    background-color: red;
  }
}
/* level4的写法，比level3更清晰简洁，表示：宽度小于30dp时生效 */
@media (width <= 30) {
  .box {
    background-color: red;
  }
}
/* 多条件写法，表示：宽度大于400dp且小于700dp时生效 */
@media screen and (min-width: 400) and (max-width: 700) {
  .box {
    background-color: red;
  }
}
/* 多条件level4写法，表示：宽度大于400dp且小于700dp时生效  */
@media (400 <= width <= 700) {
  .box {
    background-color: red;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 媒体查询的特性

类型 描述 查询时是否需带单位 支持单位
height 定义输出设备中的页面可视区域高度 否 dp
min-height 定义输出设备中的页面可视区域最小高度 否 dp
max-height 定义输出设备中的页面可视区域最大高度 否 dp
width 定义输出设备中的页面可视区域宽度 否 dp
min-width 定义输出设备中的页面可视区域最小宽度 否 dp
max-width 定义输出设备中的页面可视区域最大宽度 否 dp
aspect-ratio 定义输出设备中的页面可见区域宽高比，比例值需要按照x / y的格式，例如 1 / 2 否 无
min-aspect-ratio 定义输出设备中的页面可见区域最小宽高比，参数要求同上 否 无
max-aspect-ratio 定义输出设备中的页面可见区域最大宽高比，参数要求同上 否 无
device-type device 的可选值为：phone（手机）、watch（手表）、pad（平板）、car（车机）、tv（电视）、band（手环）smartspeaker（音响），默认 watch 否 无
shape 设备类型。目前支持的值：circle（圆形）、rect(矩形)、pill-shaped（胶囊形屏 eg: 全面屏手环） 否 无

# 媒体查询逻辑操作符

可以使用逻辑操作符组合多个媒体特性的查询条件，编写复杂的媒体查询。

类型 描述
and and 运算符用于将多个媒体特性组合到一个单独的媒体查询中，要求每个链接的特性返回 true，则此时查询为真。
not not 运算符用于否定媒体查询，如果查询不返回 false，则返回 true。如果出现在逗号分隔的列表中，它只会否定应用它的特定查询。如果使用 not 运算符，则必须指定显式媒体类型。 例如：not screen and (min-width: 400) and (max-width: 700)
only only 运算符仅用于整个查询匹配应用样式, vivo 手表处理以 only 开头的关键词时将会忽略 only。 如果使用 only 运算符，必须指定媒体类型。例如：only screen and (min-width: 400) and (max-width: 700)
, （逗号） 逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。 例如：(shape: rect), (height >= 690)
or or 运算符用于将多个媒体特性比较语句组合到一个媒体查询语句中，只要有其中一条媒体特性比较语句返回 true，查询成立。 例如：(min-width: 400) or (max-width: 700)
<= 小于等于。例如： (400 <= width)
>= 大于等于。例如： (500 >= height)
< 小于。例如： (400 < width)
> 大于。例如： (500 > height)

# dp 单位

上面媒体查询用到了 dp 单位，在快应用中 px 会使布局产生等比缩放效果，而 dp 为绝对的屏幕尺寸。

以宽度为示例，设备 dp 的计算方法如下：

屏幕宽度dp值 = 设备屏幕分辨率的宽度 / DPR
1

上述公式中 DPR 的取值可以如下算得：

DPR = 设备dpi / 160
1

引入 dp 单位，可以使得开发者获得屏幕的绝对尺寸，从而来实现媒体查询。

.box {
  width: 50dp;
  height: 50dp;
}
1
2
3
4