【HarmonyOS】培训第三次笔记

学习视频网址：鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结_哔哩哔哩_bilibili

官方文档：文档中心

一，页面样式设计注意事项

1. 页面 CSS 支持 id、class、tag 选择器，建议使用 class 选择器。
2. 页面样式系统基于 flex 弹性布局进行设置，默认就是 flex 弹性布局，需要注意，弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
3. 鸿蒙封装的 JS 组件，有一个专门的样式说明，这个和传统的 CSS 写法有很大的差异，这个尤其需要注意。

 二，多终端页面样式设计规则

1. JS UI 框架页面样式，系统基于 flex 弹性布局进行设置，默认就是 flex 弹性布局，需要注意，弹性布局会自动的拉升和压缩内部元素模块宽度、高度。

2. JS UI框架中手机和智慧屏中的 px 指逻辑像素，px 是根据实际屏幕宽度物理像素进行缩放计算的。例如当width 设为 100px 时，在宽度为1440物理像素的屏幕上，实际显示的宽度为200物理像素。

3. 需要注意的地方有：

   • 在 TV 上有一个黑色的背景，需要针对性的调整对应的 CSS 样式，颜色需要重点处理反转。
   • 穿戴设备是一个圆形的表盘，需要针对圆形容器特征专门设计对应的样式

4. 媒体查询

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

   • 针对设备和应用的属性信息，可以设计出相匹配的布局样式。

   • 当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。