本文介绍了JS UI框架在不同设备上的布局规则，如智慧屏以720px为基准宽度进行缩放，智能穿戴以454px为基准。在构建页面布局时，需要考虑元素尺寸、排列、重叠、对齐、内间距等问题，并通过分解页面元素提高代码可读性和调整便利性。结合示例图，展示了页面和留言区的布局分解过程。
JS UI框架在不同设备的布局示例如下：
图1 不同设备的布局示例 
JS UI框架中智慧屏以720px（px指逻辑像素，非物理像素）为基准宽度，根据实际屏幕宽度进行缩放，例如当width设为100px时，在宽度为1440物理像素的屏幕上，实际显示的宽度为200物理像素。智能穿戴的基准宽度为454px，换算逻辑同理。
一个页面的基本元素包含标题区域、文本区域、图片区域等，每个基本元素内还可以包含多个子元素，开发者根据需求还可以添加按钮、开关、进度条等组件。在构建页面布局时，需要对每个基本元素思考以下几个问题：
- 该元素的尺寸和排列位置
- 是否有重叠的元素
- 是否需要设置对齐、内间距或者边界
- 是否包含子元素及其排列位置
- 是
最低0.47元/天 解锁文章
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
