HarmonyOS API：通用信息

joytrian

发布于 2023-3-27 18:28

浏览

0收藏

版本：v3.1 Beta

媒体查询

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。请勿与以720px为基准的项目配置宽度px混淆。

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

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

CSS语法规则

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

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

@media screen and (round-screen: true) { … } ：当设备屏幕是圆形时条件成立

@media (max-height: 800) { … } ：范围查询，CSS level 3 写法

@media (height <= 800) { … } ：范围查询，CSS level 4 写法，与CSS level3写法等价

@media screen and (device-type: tv) or (resolution < 2) { … } ：同时包含媒体类型和多个媒体特征的多条件复杂语句查询

页面中引用资源

通过@import方式引入媒体查询，具体使用方法如下：

@import url [media-type] [and|not|only] [(media-feature)];

例如：

@import '../common/style.css' screen and (min-width: 600) and (max-width: 1200);

媒体类型

类型	说明
screen	按屏幕相关参数进行媒体查询。

媒体逻辑操作

媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（,）将其组合起来，详细解释说明如下表。

表1 媒体逻辑操作符

类型	说明
and	将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。
not	取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。使用not运算符时必须指定媒体类型。
only	当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如： screen and (min-height: 50) 老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。使用only时必须指定媒体类型。
,(comma)	将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。例如：screen and (min-height: 1000), （round-screen：true）表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。
or	将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。例如：screen and (max-height: 1000) or （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。

在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了<=，>=，<，>操作符。

表2 媒体逻辑范围操作符

类型	说明
<=	小于等于，例如：screen and (height <= 50)。
>=	大于等于，例如：screen and (height >= 600)。
<	小于，例如：screen and (height < 50)。
>	大于，例如：screen and (height > 600)。

媒体特征

类型	说明
height	应用页面显示区域的高度。
min-height	应用页面显示区域的最小高度。
max-height	应用页面显示区域的最大高度。
width	应用页面显示区域的宽度。
min-width	应用页面显示区域的最小宽度。
max-width	应用页面显示区域的最大宽度。
resolution	设备的分辨率，支持dpi，dppx和dpcm单位。其中： - dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm； - dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi； - dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。
min-resolution	设备的最小分辨率。
max-resolution	设备的最大分辨率。
orientation	屏幕的方向。可选值： - orientation: portrait（设备竖屏） - orientation: landscape（设备横屏）
aspect-ratio	应用页面显示区域的宽度与高度的比值。例如：aspect-ratio:1/2
min-aspect-ratio	应用页面显示区域的宽度与高度的最小比值。
max-aspect-ratio	应用页面显示区域的宽度与高度的最大比值。
device-height	设备的高度。
min-device-height	设备的最小高度。
max-device-height	设备的最大高度。
device-width	设备的宽度。
min-device-width	设备的最小宽度。
max-device-width	设备的最大宽度。
round-screen	屏幕类型，圆形屏幕为true，非圆形屏幕为 false。
dark-mode⁶⁺	系统为深色模式时为true，否则为false。

通用媒体特征示例代码

多个.container中的所写的属性个数以及类型需要相同，若不相同会导致显示异常。

<!-- xxx.hml -->
<div>
  <div class="container">
    <text class="title">Hello World</text>
  </div>
</div>

/* xxx.css */
.container {
  width: 300px;
  height: 600px;
  background-color: #008000;
}
@media (device-type: tv) {
  .container {
    width: 500px;
    height: 500px;
    background-color: #fa8072;
  }
} 
@media (device-type: wearable) {
  .container {
    width: 300px;
    height: 300px;
    background-color: #008b8b;
  }
}

自定义字体样式

更新时间: 2023-02-17 09:19

自定义字体可以是从项目中的字体文件中加载的字体，字体格式支持ttf和otf。

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

定义font-face

@font-face {   
  font-family: font; 
  src: url('/common/font.ttf'); 
}

font-family：

自定义字体的名称。

src：

自定义字体的来源，支持如下类别：

项目中的字体文件：通过url指定项目中的字体文件路径(只支持绝对路径，详见资源和文件访问规则章节)。
不支持设置多个src。

使用font-face

可以在style中定义font-face，然后在font-family样式中指定该font-face的名称，从而应用font-face定义的字体。

示例：

页面布局：

<!-- xxx.hml -->
<div>    
  <text class="demo-text">测试自定义字体</text>  
</div>

页面样式：

/*xxx.css*/
@font-face {
  font-family: font;
  src: url("/common/font.ttf");
}
.demo-text {
  font-family: font;
}

原子布局

更新时间: 2023-02-17 09:19

说明

从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。设计师可以考虑使用原子能力，定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力，快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。

隐藏能力

在非折行flex布局基础上，增加了显示优先级标记，可以调整组件内元素水平/垂直方向的显示优先级，根据当前组件容器的可用空间来显示内容。

样式	类型	说明
display-index	number	适用于div等支持flex布局的容器组件中的子组件，当容器组件在flex主轴上尺寸不足以显示全部内容时，按照display-index值从小到大的顺序进行隐藏，具有相同display-index值的组件同时隐藏。默认值：0（表示不隐藏）

占比能力

在非折行的flex布局中，定义了占比能力的组件，保证指定组件始终在容器的某一个比例空间中进行布局。

样式	类型	说明
flex-weight	number	指明当前元素在flex主轴方向上尺寸权值。如果容器组件中所有节点均设置此属性，当前元素尺寸为：容器主轴尺寸 * 当前权值 / 所有子元素权值和。如果容器组件中某几个节点设置此属性，则容器会对其他未设置此属性的节点进行布局，再将剩余空间分配给设置了此属性的节点，如果未设置此属性的节点设置了超过父元素的宽度，那么将没有剩余空间分配给设置了此属性的节点。设置了此属性的节点的尺寸为：容器剩余空间 * 该元素权值 / 所有子元素权值和。

固定比例

定义了组件固定比例调整尺寸的能力。

样式	类型	说明
aspect-ratio	number	1. 接受任意大于0的浮点值，定义为该节点的宽度与高度比，设置该属性后，该元素尺寸宽高比按照此属性值进行调整。 2. 遵守最大值与最小值的限制。 3. 在flex布局中，主轴尺寸先进行调整，后根据该尺寸调整交叉轴。

文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-components-common-atomic-layout-0000001478181461-V3?catalogVersion=V3

分类

标签