Отзивчив дизайн в SAPUI5 приложение - css, xml, responsive-design, sapui5

Трябва ми SAPUI5 заявление, за да отговаряммобилни и настолни. Аз съм изправен пред проблеми, особено с един изглед. Състои се от две прости GenericTiles.

sapUiVisibleOnlyOnDesktop

Дотук добре. На десктопа всичко изглежда добре, но на мобилни устройства маржът отгоре е висок. Освен това, когато все още имаше и двете плочки, видими на мобилния, те преминаха през рамката и бяха само наполовина видими (така маржът не е единственият проблем). Използвам някои css:

.customFlexBoxHome {
margin-top: 240px;
}

.customTile {
margin-left: 35px;
margin-right: 35px;
}

.customHomeBackground {
background-image: url("../images/oldtimer.jpg");
}

И това е моето мнение:

<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="com.sap.build.standard.test.controller.Home" xmlns="sap.m">
<Page class="customHomeBackground" showHeader="true" title="Home" showFooter="true">
<content>
<FlexBox class="customFlexBoxHome" justifyContent="Center" alignItems="Center">
<GenericTile class="customTile sapUiVisibleOnlyOnDesktop" header="Tile1" subheader="" frameType="Auto" press="_onGenericTilePress">
<TileContent>
<ImageContent src="sap-icon://create-form" />
</TileContent>
</GenericTile>
<GenericTile class="customTile" header="Tile2" subheader="" frameType="OneByOne" press="_onGenericTilePress1">
<TileContent>
<ImageContent src="sap-icon://bar-code" />
</TileContent>
</GenericTile>
</FlexBox>
</content>
<footer/>
<headerContent/>
<subHeader/>
<customHeader/>
</Page>

Какво мога да направя, за да добавя отзивчивост към молбата си?

Отговори:

1. Добавете медийни заявки, за да могат смартфоните да използват други маржове, освен настолните,

@media screen and (max-height: 768px) {

.customFlexBoxHome {
margin-top: 50px;
}

}

2. Адаптирайте FlexBox към

<FlexBox class="customFlexBoxHome" justifyContent="Center" alignItems="Center" wrap="Wrap">

Атрибутът wrap го прави многоредов, GenericTile е реагиращ.

Надявам се това да помогне!