鸿蒙第七次作业

第六节 TodoList应用构建

(1）页面结构设计注意事项

1.页面结构使用HTML 相同的标签进行嵌套，最外层是div容器。

2.文本内容放在<text>标签中才能呈现，否则不会呈现文本内容。

3.可以直接调用鸿蒙JS封装好的组件，这里我们使用的是switch 开关组件。

(2）页面样式设计注意事项

1．页面CSS支持id、class、tag选择器,建议使用class选择器。

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

3.鸿蒙封装的Js组件，有一个专门的样式说明，这个和我们传统的CSS 写法有很大的差异,这个尤其需要注意

如：switch组件特有的样式

 (3）数据渲染与事件绑定

1.第三方JSON 数据导入,注意使用相对路径

2.事件绑定——与vue用法类似

       hml { {变量名}}  js变量放在data中

第七节、页面样式布局及多终端运行TodoList

(1）多终端页面样式设计规则

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

2. JS UI框架中手机和智慧屏以720px(px指逻辑像素，非物理像素）为基准宽度，根据实际屏幕宽度进行缩放

例如当width设为100px时，在宽度为1440物理像素的屏幕上，实际显示的宽度为200物理像素。智能穿戴的基准宽度为454px，换算逻辑同理。在phone P40设备上，1px = 3物理像素；在TV设备上，1px = 2物理像素；在穿戴wearable设备上1px = 2物理像素

3.需要注意的地方有:

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

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

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