JS UI框架:构建用户界面布局说明
2020-11-13 16:08
274 查看
JS UI框架在不同设备的布局示例如下:
图1 不同设备的布局示例
JS UI框架中智慧屏以720px(px指逻辑像素,非物理像素)为基准宽度,根据实际屏幕宽度进行缩放,例如当width设为100px时,在宽度为1440物理像素的屏幕上,实际显示的宽度为200物理像素。智能穿戴的基准宽度为454px,换算逻辑同理。
一个页面的基本元素包含标题区域、文本区域、图片区域等,每个基本元素内还可以包含多个子元素,开发者根据需求还可以添加按钮、开关、进度条等组件。在构建页面布局时,需要对每个基本元素思考以下几个问题:
- 该元素的尺寸和排列位置
- 是否有重叠的元素
- 是否需要设置对齐、内间距或者边界
- 是否包含子元素及其排列位置
- 是否需要容器组件及其类型
将页面中的元素分解之后再对每个基本元素按顺序实现,可以减少多层嵌套造成的视觉混乱和逻辑混乱,提高代码的可读性,方便对页面做后续的调整。以下图为例进行分解:
图2 页面布局分解
图3 留言区布局分解
相关文章推荐
- 一文学会主流Ansible Web UI的部署与使用 | 万字长文
- 一种可以使Guest访问公网又可以被Host访问的网络配置方式
- @RequestParam,@RequestBody,@PathVariable注解还分不清吗?
- mysql +sqlalchemy query中的datetime转换str
- 聊聊用 UUID/GUID 作为主键那些坑
- TikTok为何繁荣,Quibi为何失败
- element ui table 表头错位问题解决
- Promethues:rocketmq_exporter初始化安装
- 安装Photoshop时出现The installation cannot continue as the installer file may be damaged. Download the in
- 19-爬虫解析利器pyquery详解
- JUC阻塞队列之BlockedQueue(七)
- AmazeUI 按钮交互的实现示例
- AmazeUI 点击元素显示全屏的实现
- AmazeUI 等分网格的实现示例
- amazeui页面分析之登录页面的示例代码
- Amaze UI 文件选择域的示例代码
- StringBuilder 比 String 快?空嘴白牙的,证据呢!
- 基于element-ui对话框el-dialog初始化的校验问题解决
- 仿照Element-ui实现一个简易的$message方法
- 00032-layui 树形下拉选择 xmSelect(二):数据懒加载