如何根据视口大小更改条带卡元素的格式

Question

我正在构建一个使用条纹进行支付的自适应网站，包括用于接受信用卡付款的 Stripe card-element 。

自然，随着视口大小的变化，段落字体大小也会发生变化。 我使用var card = elements.create('card')创建的 Stripe card-element也应该如此。 Stripe 卡元素是 iframe，因为支付数据直接进入 Stripe 的服务器，而不是我的，这意味着使用em的相对字体大小不起作用，媒体查询也不起作用。 因为，当然，这个 iframe 根本不关心我的 CSS，所以当我实例化卡片元素时，所有格式化指令当前都传递给stripe.elements.create 。

如何使 Stripe 元素的样式属性（在本例中为字体大小）自适应？

我能想到的唯一方法是在 JS 中检查视口大小并在视口大小发生变化时重新实例化元素； 但这看起来很丑陋而且矫枉过正。

 var card = stripe.elements.create('card', { hidePostalCode: true, style: { base: { fontSize: "1em" } } }); card.mount('#card-element');

 @media only screen and (min-width: 992px) { p { font-size: 9pt; } #card-element { font-size: 9pt; // Does not work. } } @media only screen and (min-width: 1200px) { p { font-size: 12pt; } #card-element { font-size: 12pt; // Does not work. } }

 <html> <head> <script src="https://js.stripe.com/v3"></script> </head> <body> <p>Some text preceding the card element</p> <div id="card-element"></div> </body> </html>

Answer 1

card元素有一个update方法，可以用来向它传递与第一次创建它时相同的选项。 通过使用带有update方法的事件侦听器，可以以与第一次定义相同的方式更改字体大小。

 window.addEventListener('resize', function(event) { if (window.innerWidth <= 320) { card.update({style: {base: {fontSize: '13px'}}}); } else { card.update({style: {base: {fontSize: '16px'}}}); } });

来源： https://stripe.com/docs/stripe-js/reference#other-methods

如何根据视口大小更改条带卡元素的格式

问题描述

1 个解决方案

解决方案1
1 2019-10-12 12:01:24

如何根据视口大小更改条带卡元素的格式

问题描述

1 个解决方案

解决方案1 1 2019-10-12 12:01:24

解决方案1
1 2019-10-12 12:01:24