使sap.m.CustomTile的分辨率可以调整大小从500px到320px

我用sap.m.FormattedText定制了sap.m.CustomTile。我需要这个CustomTile根据显示分辨率调整大小，例如从500像素到320像素。我用于此：使sap.m.CustomTile的分辨率可以调整大小从500px到320px

@media only screen and (max-width: 500px) { 

    .tileSmall.sapMCustomTile { 
     width: 80.9vw !important; 
     height: 80.9vw !important; 
    } 

} 

@media only screen and (max-width: 320px) { 

    .tileSmall.sapMCustomTile { 
     width: 200px !important; 
     height: 200px !important; 
    } 

}

我不能使用％，因为它在我的应用程序中表现奇怪。所以我想用vw代替。我做了demo。我想所有的时间保持它，因为它为530px分辨率在：

但是，当分辨率是例如改变417px我：

我得到的分辨率357px：

有什么办法如何锚尾和子页脚（最后两行）？

或如何根据瓷砖高度change间隙的高度（由br标签创建）？

感谢您的任何建议。

来源

2017-05-31 Jaro

因为您在自定义图块内部使用VBox，所以实现您想要的功能相当容易。您可以查看Size Adjustments Explored演示以获取更多示例。

其基本思想是你可以在VBox内部玩弄每个项目的增长/缩小因子。默认情况下，VBox的所有项目都被平等对待，并被拉伸以填充可用空间。因为您希望页眉和页脚得到修复，所以您应该将这些项目的shrinkFactor（默认值= 1）和growFactor（默认值= 0）设置为0。

瓷砖的中心应该只是“空白”，填补了可用空间的休息，所以你可以给它growFactor和shrinkFactor等于1。你也不需要把br在里面，因为物品会动态增长/缩小以填充剩余空间。

您可以使用layoutData聚合和传递FlexItemData元素为每个UI5元素添加这些因子。

另一个小改变是，您应该为VBox指定width: "100%"和height: "100%，以确保其大小根据拼块的大小进行调整。

页眉/页脚

new sap.m.FormattedText({ 
     htmlText: "whatever you have now", 
     layoutData: new sap.m.FlexItemData({ 
     shrinkFactor: 0 
     }) 
    });

中心

new sap.m.FormattedText({ 
     htmlText: "no need to put anything here", 
     layoutData: new sap.m.FlexItemData({ 
     shrinkFactor: 1, 
     growFactor: 1 
     }) 
    });

你可以找到这个解决方案在这里的工作版本：http://jsbin.com/tirizanaje/1/edit?html,css,output

来源

2017-06-03 09:33:00

谢谢谢尔班。 – Jaro

使sap.m.CustomTile的分辨率可以调整大小从500px到320px

回答

相关问题