第六节、TodoList应用构建
(1）页面结构设计注意事项
1.页面结构使用HTML 相同的标签进行嵌套，最外层是div容器。2.文本内容放在标签中才能呈现，否则不会呈现文本内容。
3.可以直接调用鸿蒙JS封装好的组件，这里我们使用的是switch 组件。
(2）页面样式设计注意事项
1．页面CSS支持id、class、tag选择器,建议使用class选择器。
2．页面样式系统基于flex弹性布局进行设置，默认就是flex弹性布局，需要注意，弹性布局会自动的拉升和
压缩内部元素模块宽度、高度。
3.鸿蒙封装的Js组件，有一个专门的样式说明，这个和我们传统的CSS 写法有很大的差异,这个尤其需要
注意。

第七节、页面样式布局及多终端运行TodoList
(1）多终端页面样式设计规则
1. JS UI框架页面样式，系统基于flex弹性布局进行设置，默认就是flex弹性布局，需要注意，弹性布局会自
动的拉升和压缩内部元素模块宽度、高度。
2. JS UI框架中手机和智慧屏以720px(px指逻辑像素，非物理像素）为基准宽度，根据实际屏幕宽度进行缩
放，例如当width设为100px时，在宽度为1440物理像素的屏幕上，实际显示的宽度为200物理像素。智能穿戴的基准宽度为454px，换算逻辑同理。
3.需要注意的地方有:
。在TV上有一个黑色的背景，需要针对性的调整对应的CSS样式，颜色需要重点处理反转。
土
。穿戴设备是一个圆形的表盘，需要针对圆形容器特征专门设计对应的样式
4.媒体查询
媒体查询（Media Query)在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能:
。针对设备和应用的属性信息，可以设计出相匹配的布局样式。
。当屏幕发生动态改变时（比如分屏、横竖屏切换)，应用页面布局同步更新。使用@media来引入查询语句，对媒体功能和媒体类型进行判断，具体规则如下: