Заполнение нижнего хака не работает на мобильном телефоне

Question

В настоящее время я работаю над хакерским дополнением, чтобы предотвратить переформатирование контента, и оно отлично работает на рабочем столе.

У меня есть div, который имеет что-то вроде следующего;

<div style="--imageWidth: 300; --imageHeight: 200;"></div>

и в CSS;

div {
  border: 3px dashed magenta;
  padding-bottom: calc(var(--imageHeight) / var(--imageWidth) * 100%)}

Но на мобильном устройстве изображение выглядит следующим образом, оно масштабируется и между изображением и текстом ниже большой разрыв. См. Изображение здесь

Answer 1

Попробуйте избавиться от встроенного стиля и придерживаться исключительно стилей CSS.Вы можете использовать медиазапрос, чтобы установить параметры для мобильного представления, это позволит вам стилизовать 2 версии CSS, одну для настольного компьютера (ваш CSS) и одну для мобильного (медиазапрос в вашем CSS).

theследующий код создаст синий фон, но зеленый на мобильном телефоне.

/*CSS*/
body {
  background-color: blue;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: green;
  }
}

используйте эту же логику для написания специального кода для вашего <DIV>.добавьте к нему идентификатор и назовите его в css для вашего стиля рабочего стола, затем используйте @media, чтобы выбрать этот идентификатор и изменить его на мобильном телефоне.

, вы сможете проверить его, изменив размер своего браузера.Вы также можете захотеть взглянуть на flexbox, который спасает жизнь для такого типа вещей, и вы можете написать CSS внутри и снаружи медиазапроса для кода определенного размера.

Надеюсь, что ответит на ваш вопрос.дайте нам знать, что вы найдете!