如何在Ionic APP中将相同的CSS应用于Android和IOS

Posted 2021-03-28

我正在使用我的Ionic App，我正面临ios中UI的问题。就像我已经为android和常见CSS添加了CSS但它在IOS中不起作用。

我的CSS：

ion-label.label.label-md {
    font-size: 14px;
    font-weight: 300;
}

ion-label.label.label-ios {
    font-size: 14px;
    font-weight: 300;
}

这在Android和IOS中运行良好，但我已经分别为两者定义。

和通用CSS：

ion-label.label {
    font-size: 14px !important;
    font-weight: 300 !important;
}

在这方面，它对两者都很好，但我必须为此定义！important。

所以，我想定义适用于Android和iOS的CSS。

任何帮助深表感谢。

答案

添加自己的CSS类，而不是修改预先存在的CSS类。带有ion的CSS类是由Ionic预先定义的，其中包含md或ios的类是分别为android和ios平台预定义的。

相反，您应该在html中声明自己的css类并添加.SCSS文件。这将覆盖预定义的类并使用您定义的值。因此，你的CSS应该是

HTML

<div class="my-label"></div>

CSS：

.my-label {
    font-size: 14px;
    font-weight: 300;
}

如果仍然无法看到正在应用的CSS，请检查是否正确应用了该类。

另一答案

您可以通过以下步骤轻松调试它：

1）在模拟器中运行您的应用程序

2）打开safari - >首选项

3）高级 - >检查菜单栏中的显示开发菜单

4）开发 - >选择你的模拟器，然后点击你的应用程序

5）使用Element检查进行调试

希望它能帮到你。