Как изменить форматирование карточного элемента полосы в зависимости от размера области просмотра - PullRequest
Новая
       5

Как изменить форматирование карточного элемента полосы в зависимости от размера области просмотра

0 голосов
/ 12 октября 2019

Я создаю адаптивный веб-сайт, используя полосу для платежей, включая Stripe card-element, который используется для приема платежей по кредитным картам.

Естественно, с изменением размера области просмотра изменяется размер шрифта абзаца. То же самое должно быть верно для полосы card-element, которую я создаю с помощью var card = elements.create('card'). Элемент карты Stripe - это iframe, потому что данные платежа направляются прямо на серверы Stripe, а не на мой, а это означает, что относительный размер шрифта с использованием em не работает и не выполняет медиазапросы. Поскольку, конечно, этот iframe совершенно не заботится о моем CSS, все инструкции по форматированию в настоящее время передаются stripe.elements.create, когда я создаю экземпляр элемента card.

Как я могу сделать свойства стиля (в этомcase размер шрифта) адаптивного элемента 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>

1 Ответ

1 голос
/ 12 октября 2019

Элемент 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

...