使sap.m.CustomTile可调整大小以便解决，例如从500px到320px

Question

我使用一些sap.m.FormattedText自定义了sap.m.CustomTile。我需要根据显示分辨率调整此CustomTile的大小，例如从500 px到320 px。我用过这个：

@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标签创建）？

感谢您的任何建议。

Answer 1

因为您在自定义磁贴中使用VBox，所以很容易实现您想要的效果。您可以查看Size Adjustments Explored演示了解更多示例。

基本思想是你可以使用VBox中每个项目的增长/缩小因子。默认情况下，VBox的所有项目都被平等对待并被拉伸以填充可用空间。由于您希望修改页眉和页脚，因此您应将shrinkFactor（默认值= 1）和growFactor（默认值= 0）设置为0。

瓷砖的中心应该只是＆＃34;空白＆＃34;填写剩余的可用空间，这样您就可以将其growFactor和shrinkFactor等于1.您也不需要将br放在那里，因为该项目将动态增长/缩小以填充剩余空间。

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

另一个小变化是您应该为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