CSS Media Запросы и реклама

Question

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

Как бы вы посоветовали мне поменять рекламные баннеры в зависимости от текущего активного медиа-запроса? Я знаю, что мог бы использовать jQuery для отслеживания изменений ширины браузера и замены их таким образом, но существует ли какое-то существующее решение где-то вроде плагина jQuery?

Answer 1

По сути, это уже встроено в Twitter Bootstrap. Bootstrap имеет несколько классов под названием .visible- а также .hidden- которые используются в сочетании с phone, tablet а также desktop показывать и скрывать элементы на разных устройствах.

Затем вы просто включите X различных версий вашего баннера, например:

<div class="ads">
    <img class="visible-phone" src="smallest.png"/>
    <img class="visible-tablet" src="medium.png"/>
    <img class="visible-desktop" src="large.png"/>
</div>

Конечно, если вы хотите установить пользовательские свойства CSS для медиа-запросов, вы можете добавить свои собственные. Вот как Bootstrap делает это:

@media (min-width: 768px) and (max-width: 979px) {
  .visible-tablet {
    display: block;
  }
  ...
  .visible-desktop {
    display: none;
  }