Con*_*tin 2 javascript css iframe stripe-payments
我正在构建一个使用 stripe 进行支付的自适应网站，包括 Stripe card-element，它用于接受信用卡付款。
当然，随着视口大小的变化，段落字体大小也会发生变化。card-element对于我正在创建的Stripe 来说也是如此var card = elements.create('card')。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>该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