Responsive Design in application 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 чуйним.

Сподіваюся, це допомагає!