SAP UI5 sap.ui.layout.Grid 控件宽度百分比的设置原理(2)

简介: SAP UI5 sap.ui.layout.Grid 控件宽度百分比的设置原理

Form container 内每个元素没有显式分配 width 吧?至少在 GridRender.js 里根据源代码搜索没有发现。这说明,是用其它方式来控制 Grid 内的元素相对位置的。


image.png


根据调试,发现这个 css 类控制了 50% 的宽度显示:.sapUiRespGridSpanL6



image.png


image.png



改成 80% 之后,就变宽了:


image.png



label 16.67% 2 / 12 等于六分之一:



image.png


为什么是2?



image.png



但为啥选择的是 L2,而不是 M3?




image.png


切换成 iPhone 之后:.sapUiRespGridMedia-Std-Phone.sapUiRespGridHSpace0>.sapUiRespGridSpanS4



image.png



CSS 类名称更改了,类型从之前的 Desktop 变成了 Phone.


4 除以 12 等于 1/3.


切换成 Tablet 之后,M3,四分之一:25%


image.png



这些出现在 CSS 类里的设备名称,无论是 Desktop,还是 Tablet,Phone,都是基于各种指标的使用设备的基本分类。


这些指标的例子是对触摸事件的支持、使用的操作系统和浏览器的用户代理。


注意:没有简单的方法可以从浏览器提供的信息中准确地确定使用的设备。 因此,我们特别依赖用户代理。 因此,结合给定的设备功能,可以将多个标志设置为真,特别是对于具有触摸功能的桌面设备和请求将网页作为桌面页面的移动设备来说。


相关文章
|
2月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
|
3月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
201 0
|
3月前
|
C# Windows
一款开源、免费、现代化风格的WPF UI控件库
一款开源、免费、现代化风格的WPF UI控件库
|
3月前
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
530 0
|
3月前
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
77 0
|
4月前
|
API Apache C#
推荐2款开源、美观的WinForm UI控件库
推荐2款开源、美观的WinForm UI控件库
262 1
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
5月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
5月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
下一篇
无影云桌面