Ionic 4中不同页面的最大宽度不同

Question

我正在使用 Ionic 4 构建一个小型网络应用程序。我在 global.scss 上使用以下内容来限制页面宽度，因此它在桌面和移动设备上的外观相似：

.ion-page {
  max-width: 700px;
  margin: auto;
}

这个技巧与宣传的一样有效，但我想覆盖此规则仅针对一页，以便它以全宽显示。

如何在 Ionic 4 中设置每页的自定义最大宽度？

Answer 1

转到您要自定义的页面的 .scss。首先打开你的 ts 文件并将你的组件元数据更新为

@Component{
    selector: 'your-page-selector',
    templateUrl: 'your-page-selector.html',
    styleUrls: ['your-page-selector.scss'],
    encapsulation: ViewEncapsulation.None
}

ViewEncapsulation 是“@angular/core”的一部分；

现在转到您的页面-selector.scss 并添加：

your-page-selector {
  // apply your custome css here
}

这实际上会移除此组件的 Dom 阴影，允许您将所有 CSS 应用到特定的 page/component

To read more on ViewEncapsulation

Ionic 4中不同页面的最大宽度不同

Different max width to different pages in Ionic 4

css

ionic-framework

ionic4