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;
  }