平台样式 · ionic4中文手册

[TOC] Ionic根据运行应用程序的设备提供特定于平台的样式。对组件进行样式设置以匹配设备指南允许应用程序编写一次，但根据访问的位置，用户可以看到并感觉原生。 ## ionic-modes Ionic使用**模式**来自定义组件的外观。每个**平台**都有一个默认**模式**，但可以覆盖它。下图显示了添加到每个**平台**的默认**模式**： | 平台 | 模式 | 描述 | | --- | --- | --- | | `ios` | `ios` | 在iPhone，iPad或iPod上观看将使用[iOS样式](https://www.apple.com/ios)。 | | `android` | `md` | 在任何Android设备上查看都将使用[Material Design样式](https://material.io/guidelines/)。 | | `core` | `md` | 任何不适合上述任何平台的平台都将使用[Material Design样式](https://material.io/guidelines/)。 | 例如，在Android平台上查看的应用程序`md`默认使用（Material Design）模式。该`<html>`元素将已经`class="md"`加入到它和所有的组件将使用材质设计风格： ~~~ < html class = “md” > ~~~ *注意：**平台**和**模式**不一样。可以将平台设置为使用应用程序[配置](https://ionicframework.com/docs/api/config)中的任何模式。* ## 覆盖模式样式每个Ionic组件都可以根据模式设置样式。该`html`元件既具有`class`和`mode`属性以等于当前的模式的值。这些可用于覆盖任何组件的样式。例如，要设置样式`ion-badge`以`uppercase`仅在`ios`模式下具有文本： ~~~ .ios ion-badge { text-transform：uppercase; } } ~~~ 还有许多全局CSS变量可用于覆盖样式。要为`ios`应用程序设置背景颜色样式，可以编写以下内容： ~~~ .ios { --ion-background-color：＃222 ; } } ~~~ 有关要覆盖的所有全局CSS变量的列表，请参阅[先进的主题](https://ionicframework.com/docs/theming/advanced)。