# 通用样式

手机 手表

通用样式，即所有组件都可以支持的样式

它们均与 css 的属性样式用法保持一致，开发者可写在内联样式或<style>标签里，实现组件样式的定制化

关于组件样式的设置，可以参考此文档入门

# 示例代码

<template>
  <div>
    <div class="box-normal" style="background-color:red"></div>
    <div class="box-normal"></div>
  </div>
</template>
<style>
  .box-normal {
    background-color: green;
    width: 100px;
    height: 100px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 属性列表

注：

通用样式均为非必填项。

名称 类型 默认值 描述
width <length> | <percentage> - 未设置时使用组件自身内容需要的宽度
height <length> | <percentage> - 未设置时使用组件自身内容需要的高度
padding <length> 0 简写属性，在一个声明中设置所有的内边距属性，该属性可以有 1 到 4 个值，具体请参考MDN (opens new window)文档
padding-[left|top|right|bottom] <length> 0 设置一个元素的某个方向的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。
margin <length> 0 简写属性，在一个声明中设置所有的外边距属性，该属性可以有 1 到 4 个值，具体请参考MDN (opens new window)文档
margin-[left|top|right|bottom] <length> 0 设置一个元素的某个方向的外边距，该属性不能为负值。
border - 0 简写属性，在一个声明中设置所有的边框属性，可以按顺序设置属性 width style color，不设置的值为默认值
border-[left|top|right|bottom] - 0 简写属性，在一个声明中设置对应位置的所有边框属性，可以按顺序设置属性 width style color，不设置的值为默认值
border-style dotted | dashed | solid solid 暂时仅支持 1 个值，为元素的所有边框设置样式
border-width <length> 0 简写属性，在一个声明中设置元素的所有边框宽度，或者单独为各边边框设置宽度，具体请参考MDN (opens new window)文档
border-[left|top|right|bottom]-width <length> 0 为元素的某个方向的边框设置边框宽度
border-color <color> black 简写属性，在一个声明中设置元素的所有边框颜色，或者单独为各边边框设置颜色，颜色值的填入请参考 颜色配置
border-[left|top|right|bottom]-color <color> black 颜色值的填入请参考 颜色配置
border-radius <length> | <percentage> 1070+ 0 border-radius 属性允许你设置元素的外边框圆角。设置时需要同时设置 border-width、border-color，单独设置 border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color 时 border-radius 无效
border-[top|bottom]-[left|right]-radius <length> | <percentage> 0 设置四个角的圆角弧度
background <linear-gradient> - 支持 渐变样式，暂时不能与 background-color、background-image 同时使用
background-color <color> - 颜色值的填入请参考 颜色配置
color <color> - 颜色值的填入请参考 颜色配置
background-image <uri> - 暂时不支持与 background-color，border-color 同时使用；支持本地图片资源；1030+支持网络图片资源；1010+版本支持 9-patch 图，详情见背景图样式
background-size contain | cover | auto | <length> | <percentage> 100% | 设置背景图片大小，详情见背景图样式
background-repeat repeat | repeat-x | repeat-y | no-repeat repeat 设置是否及如何重复绘制背景图像，详情见背景图样式
background-position <length> |<percentage>| left | right | top | bottom | center 0px 0px 描述了背景图片在容器中绘制的位置，支持 1-4 个参数，详情见背景图样式
opacity <number> 1 opacity 属性指定了一个元素的透明度。
display flex | none flex 快应用只支持 flex 布局；将当前元素的 display 设置为 none 快应用页面将不渲染此元素
visibility visible | hidden visible visibility 属性控制显示或隐藏元素而不更改文档的布局
flex <number> - 父容器为<div>、<list-item>、<tabs>时生效
flex-grow 手表不支持 <number> 0 父容器为<div>、<list-item>时生效
flex-shrink 手表不支持 <number> 1 父容器为<div>、<list-item>时生效
flex-basis 手表不支持 <number> -1 父容器为<div>、<list-item>时生效
flex-direction <string> 'row' 默认为横向’row', 父容器为<div>、<list-item>时生效
align-items <string> 'flex-start' align-items 定义了伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式。flex-start(默认值)：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。center：伸缩项目的外边距盒在该行的侧轴上居中放置。baseline：伸缩项目根据他们的基线对齐。stretch：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。
justify-content <string> 'flex-start' justify-content 定义了伸缩项目沿着主轴线的对齐方式。flex-start(默认值)：伸缩项目向一行的起始位置靠齐。flex-end：伸缩项目向一行的结束位置靠齐。center：伸缩项目向一行的中间位置靠齐。space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。
position absolute | relative relative 1060+版本将新增支持 relative 和 absolute 属性值，且默认值为 relative；父容器为<list>、<swiper>时不生效。
[left|top|right|bottom] <number> - 一般配合fixed或absolute(1060+)布局使用

# 媒体查询

通过媒体查询(media query)，开发者可以根据各种设备特征和参数的值或者是否存在来调整卡片的样式。

媒体查询是响应式设计的一部分。在卡片中，和 css 类似，可使用 @media at-rule 根据媒体查询的结果，有条件地应用样式表的一部分；也可使用 @import 有条件地应用整个样式表。

开发者也可以参考MDN 文档 (opens new window)入门，但是请注意，快应用支持的媒体类型和媒体特性是 web css 的子集，并没有提供完全支持，详情请参阅下面的文档。

# 示例代码：

.box {
  width: 100px;
  height: 100px;
  background-color: black;
}

@media (orientation: landscape) {
  .box {
    background-color: white;
  }
}
1
2
3
4
5
6
7
8
9
10
11

# 语法：

每条媒体查询语句都由一个可选的媒体类型和任意数量的媒体特性表达式构成。可以使用多种逻辑操作符合并多条媒体查询语句。媒体查询语句不区分大小写。

当媒体类型（如果指定）与在其上显示文档的设备匹配并且所有媒体特性表达式都计算为true时，媒体查询将计算为true。 涉及未知媒体类型的查询总是 false 的。

有两种方法可以执行媒体查询:

# @media 方式引入媒体查询:

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

举例：

  • `@media (max-width: 30) { ... }`  // level3的写法。

  • `@media (width <= 30) { ... }`       // level4的写法，比level3更清晰简洁。

  • `@media screen and (min-width: 400) and (max-width: 700) { ... }` // 多条件写法。

  • `@media (400 <= width <= 700) { ... }` // 多条件level4写法。

# @import 方式引入媒体查询

@import './css_file_name.css' [media type] [and|not|only] [(media feature) ];
1

举例：

  • @import './style.css' screen and (min-width: 400) and (max-width: 700); // 多条件写法

# 媒体类型：

媒体类型（Media types）描述设备的类别。除了在使用 not 或 only 逻辑操作符必须一并填上媒体类型;其他时候，媒体类型是可选择是否填入的。

目前快应用支持的媒体类型如下：

媒体类型 简介
screen 主要用于屏幕。

# 媒体特性：

媒体特性（Media features）描述了输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。

每条媒体特性表达式都必须用括号括起来。

目前快应用支持的媒体特性如下：

类型 描述 查询时是否需带单位 支持单位
height 定义输出设备中的页面可视区域高度 否 dp
min-height 定义输出设备中的页面可视区域最小高度 否 dp
max-height 定义输出设备中的页面可视区域最大高度 否 dp
width 定义输出设备中的页面可视区域宽度 否 dp
min-width 定义输出设备中的页面可视区域最小宽度 否 dp
max-width 定义输出设备中的页面可视区域最大宽度 否 dp
resolution 定义输出设备的分辨率 是 dppx,dpi
min-resolution 定义输出设备的最小分辨率 是 dppx,dpi
max-resolution 定义输出设备的最大分辨率 是 dppx,dpi
orientation 定义屏幕处于横屏模式还是竖屏模式，支持属性：portrait（竖屏）、landscape（横屏） 否 无
aspect-ratio 定义输出设备中的页面可见区域宽高比，比例值需要按照x / y的格式，例如 1 / 2 否 无
min-aspect-ratio 定义输出设备中的页面可见区域最小宽高比，参数要求同上 否 无
max-aspect-ratio 定义输出设备中的页面可见区域最大宽高比，参数要求同上 否 无
prefers-color-scheme 检测用户的系统主题，仅在 Android 10+系统生效。支持属性：light(日间模式）、dark（夜间模式） 否 无
manufacture 设备制造商名称，支持属性：OPPO、vivo、xiaomi、honor 否 无
device-type 设备类型，支持属性：phone(手机)、watch(手表)、car(车机) 否 无
widget-size 卡片容器尺寸大小，如 1x1、2x1、4x2、4x4 等 否 无
scene 卡片入口场景，负一屏 assistantscreen、桌面 launcher、全搜 globalsearch、日历 calendar、锁屏 lockscreen、建议组件 suggestion、语音助手 voiceassistant、短信 sms、服务中心 servicecenter 等 否 无

# 注意：

1.dppx 的值对应的是快应用的device接口的getInfo方法返回值的screenDensity值，也与浏览器里 BOM API 的 Window.devicePixelRatio 值一样,详情请查阅快应用文档 (opens new window)或MDN 文档 (opens new window)

举例：一台安卓物理分辨率为 1920*1080 的手机，screenDensity = 3，所以此设备满足(resolution: 3dppx)的查询条件

2.dpi 的值= 160 * dppx 的值，dppx 值计算可参考第 1 条规则。

举例：一台安卓物理分辨率为 1920*1080 的手机，screenDensity = 3，此设备的 dpi 值 = 160 * 3 = 480，所以此设备满足(resolution: 480dpi)的查询条件

3.在媒体特性列表中，标记了"查询时不带单位"的媒体特性,如 width、height 的查询，都不带长度单位，且长度单位只能为dp

dp 数值 = 物理分辨率 / screenDensity

举例：一台安卓物理分辨率为 1920*1080 的手机，screenDensity = 3，屏幕宽度 = 1080 像素 = 360dp，所以此设备满足(width:360)的查询条件

4.媒体特性里，页面可视区域的意思是整个屏幕去掉通知栏、标题栏等其他非快应用前端可以控制布局渲染的区域。其宽高值都可以用快应用的device接口的getInfo获取，以下是示例代码：

<script>
  import device from '@system.device'
  export default {
    onReady() {
      device.getInfo({
        success: function(result) {
          let { windowWidth = 0, windowHeight = 0, screenDensity = 0 } = result
          console.log(`像素密度（同样也是dppx的值）: ${screenDensity}`)
          console.log(`可视区域宽度（物理分辨率）: ${windowWidth}`)
          console.log(`可视区域高度（物理分辨率）: ${windowHeight}`)
          console.log(`可视区域宽度（dp单位）: ${windowWidth / screenDensity}`)
          console.log(`可视区域高度（dp单位）: ${windowHeight / screenDensity}`)
          console.log(`设备dpi值: ${screenDensity * 160}`)
        }
      })
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 逻辑操作符：

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

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