Question

我正在为我的应用程序使用OpenUI5工具页。在所有演示中，此ToolPage占用可用宽度的100％，但我想使用媒体查询来设置左右边距。

<mvc:View
    height="100%"
    controllerName="internal_app.controller.App"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:tnt="sap.tnt">

<tnt:ToolPage id="app" class="internalAppToolPage">
    <tnt:header>
        <tnt:ToolHeader>
######

我的视图如下所示。我将类internalAppToolPage添加到了ToolPage并设置了CSS

@media (min-width: 1280px) {
    .internalAppToolPage {
        width: 1280px !important;
        margin-left: 50%;
        background-color: rgba(255,255,255,0.3);
    }
}

，但这会使整个页面向右移动。我究竟做错了什么。抱歉，这太丢了，但我看不到我的错误。

Answer 1

如果仅担心双方的余量，则无需使用媒体查询。由于UI5 sap.m库提供了响应式布局。

只需使用标准UI5类，即可帮助您达到要求。

您可以遍历Standard Margins，它提供了不同的 margins 类。它还提供了响应式类。

您也可以根据需要参考Standard Padding。

OpenUI5：在ToolPage的两侧添加边距

1 个答案: