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

Question

我正在使用我的Ionic 应用程序，但我在 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。

非常感谢任何帮助。

Answer 1

添加您自己的 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，请检查类是否应用正确。