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,都是基于各种指标的使用设备的基本分类。


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


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


相关文章
|
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 属性的应用介绍
|
5月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
5月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
5月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
|
5月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
|
5月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
下一篇
无影云桌面