时间戳

首页 > 解决方案 > 离子 - 在某些设备上不遵守图像比例

css - 离子 - 在某些设备上不遵守图像比例

问题描述

我使用 Ionic 框架制作了一个应用程序，但在某些设备上出现了问题。这是我的主页： 在此处输入图像描述

在某些设备（iPhone 5S、iPhone 5C、Samsung S5）上，页面显示如下：

在此处输入图像描述

这个页面是用离子网格制作的。这是我的 css 的一部分：

    ion-grid{
        height: 100%;

        ion-row.homeM{
            height: 20%;

            img{
                height: 80%;
            }
            p{
                margin-top: 0px;
            }
        }

        ion-row.homeML{
            height: 25%;

            img{
                height: 75%;
            }
            p{
                margin-top: 0px;
            }
        }
    }

ion-row.homeM 用于纵向显示，ion-row.homeML 用于横向显示。

欢迎帮助:)！

谢谢

标签： cssionic-frameworkdisplay

解决方案

要创建响应式设计，请尝试使用“vh for height”和“vw for width”或“em”而不是“px 或 %” ， 试试这个：

 ion-grid{
 height:98vh;
  ion-row.homeM{
    height: 40vh;

    img{
        height: 100vh;
      /*you can add max-height to prevent img to be stretched*/
         max-height:100px;//for example
        width:30vw;
    }
    p{
        margin-top: 0px;
    }
  }
}

我希望这对您有所帮助，您可以从这里了解更多关于我所说的内容： ViewPort Unit

推荐阅读