HarmonyOS API：通用信息

版本：v3.1 Beta

媒体查询

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

说明

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

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

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

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);

媒体类型

媒体逻辑操作

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

表1 媒体逻辑操作符

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

表2 媒体逻辑范围操作符

媒体特征

通用媒体特征示例代码

多个.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布局基础上，增加了显示优先级标记，可以调整组件内元素水平/垂直方向的显示优先级，根据当前组件容器的可用空间来显示内容。

占比能力

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

固定比例

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

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