如何仅在Ion 5网格中的lg设备中添加填充

Question

我试图仅在lg设备中向ion-grid添加填充。离子网格的文档建议使用--ion-grid-padding-lg，但在下面的场景中不起作用。

<ion-grid class="grid-pay-now">
<ion-row>
<ion-col size="12" size-sm class="ion-text-justify">
<div>
<ion-text color="secondary">
<h2>Pay online</h2>
</ion-text>
</div>
<div>
<ion-text class="title">
Quick Payment
</ion-text>
<h2 class="ion-padding-top">
<p>Our client may have asked us to get in touch with you. Don't worry, we're friendly and
great listeners.
</p>
<p>
We'll show you how you can pay, talk to us about your repayments, or help you if you're
having some difficulties.
</p>
</h2>
</div>
</ion-col>
</ion-row>
</ion-grid>

scss文件

.grid-pay-now
{
--ion-grid-padding-lg: 50px; // this doesn't work
// --ion-grid-padding: 50px; // this works for all devices, but I don't want for all devices
}

如何仅为lg设备向网格添加填充？

Answer 1

请检查iPadPro或width>1000px，运行良好