Размер баннера в зависимости от разрешения экрана......

[pro100sn]

Есть 2 рекламодателя.
Планируется баннеры первого рекламодателя демонстрировать на ноутбуках-компьютерах (размер баннера 728х90)
Баннеры второго рекламодателя (Гугл) планируется откручивать на всех других размерах экрана (планшеты, мобильные устройства).
Как это технически можно сделать? Чтобы при полном экране показывались одни баннеры, а при суженном экране - другие.

[menvik]

Либо пили через бутстрап, или в стиле прописывай нужные разрешения и условия через @media

[alex-web]

через media-запросы или javascript-использовать

[Clever]

Код Выделить Развернуть

/*  1. Screen 240px - 479px;
-------------------------------------------------- */
@media screen and (min-width:240px) and (max-width:479px) {
               
}

/* 2. Screen 480px - 799px;
-------------------------------------------------- */
@media screen and (min-width:480px) and (max-width:799px) {

}

/* 3. Screen 800px - 979px;
-------------------------------------------------- */
@media screen and (min-width:800px) and (max-width:979px) {

}

/* 3. Screen 980px +;
-------------------------------------------------- */
@media screen and (min-width:980px){

}

[pro100sn]

Спасибо всем!
Roffun, подскажите, сам код баннера где располагать? Точнее 2х баннеров.
Если не ошибаюсь, баннеры после @media условий должны идти? В самом конце?

[Clever]

Спасибо всем!
Roffun, подскажите, сам код баннера где располагать? Точнее 2х баннеров.
Если не ошибаюсь, баннеры после @media условий должны идти? В самом конце?

Сначала как обычно можно прописать класс. А потом этот же класс для каждого из экранов, это если не адаптивный блок, например Adsense есть блок по умолчанию адаптивный, его не нужно подгонять.


А так код баннера располагаете в самом шаблоне, это ведь html код. А вышеописанное уже в css. Например:


html:

Код Выделить Развернуть


<div class="banner-1">здесь код самого баннера</div>
<div class="banner-2">здесь код самого баннера -2</div>

css:

Код Выделить Развернуть

.banner-1 {
ваш css
}

.banner-2 {
ваш css-2
}

/*  1. Screen 240px - 479px;
-------------------------------------------------- */
@media screen and (min-width:240px) and (max-width:479px) {
   .banner-1 {
     ваш css
   }

   .banner-2 {
    ваш css-2
   }             
}

/* 2. Screen 480px - 799px;
-------------------------------------------------- */
@media screen and (min-width:480px) and (max-width:799px) {
   .banner-1 {
     ваш css
   }

   .banner-2 {
    ваш css-2
   }
}

/* 3. Screen 800px - 979px;
-------------------------------------------------- */
@media screen and (min-width:800px) and (max-width:979px) {
   .banner-1 {
     ваш css
   }

   .banner-2 {
    ваш css-2
   }
}

/* 3. Screen 980px +;
-------------------------------------------------- */
@media screen and (min-width:980px){
   .banner-1 {
     ваш css
   }

   .banner-2 {
    ваш css-2
   }
}

/* ваш css и ваш css-2  это параметры одних и тех же блоков для разных разрешений экрана */

Здесь по такому принципу каркас верстки создаётся. Если создать резиновый каркас от 240px, сгенерировать, открыть в браузере и уменьшить экран (CTRL +) , то будет видно как меняется поведение блоков. То же самое и с баннерами или любыми другими элементами можно делать.



Добавлено: 29-01-2016, 16:42:00

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

[pro100sn]

Ещё раз спасибо, Roffun. С примером вышло очень удачно! Мне правда надо наоборот: Гугл при маленьких разрешениях экрана, а партнёрку при  большом разрешении, но дальше надеюсь разберусь. 

[Clever]

Ещё раз спасибо, Roffun. С примером вышло очень удачно! Мне правда надо наоборот: Гугл при маленьких разрешениях экрана, а партнёрку при  большом разрешении, но дальше надеюсь разберусь. 

В примере это просто слово написано внутри баннера.  А так разницы нет. Всё зависит от того, в какой контейнер ложить.
Содержимое блока banner-1 - для больших экранов, а содержимое banner-2 - для маленьких.

[pro100sn]

Код Выделить Развернуть

<style>
        .banner-1 {
            width:728px;
            height:90px;
            margin: 0 auto;     
        }
       
       /* Для отображения на устройствах меньше 980px*/       
        @media screen and (min-width:240px) and (max-width:479px) {
        .banner-1 {
                display:none;
          } 
        .banner-2 {
                display:block;
          }
        }
       
        @media screen and (min-width:480px) and (max-width:799px) {
          .banner-1 {
                display:none;
          } 
        .banner-2 {
                display:block;
          }
        }
       
        @media screen and (min-width:800px) and (max-width:979px) {
          .banner-1 {
                display:none;
          }
        .banner-2 {
                display:block;
          }
        }
       
    </style>
<div class="banner-1">код партнёрки</div>
<div class="banner-2">адаптивный код adsense</div>



Проверьте, пожалуйста, Roffun.

[Clever]

Проверьте, пожалуйста, Roffun.

Почти правильно, только в вашем случае на большом отображается сразу два блока. Не хватает скрытия блока 2 на большом, нужно в пример добавить:

Код Выделить Развернуть


    .banner-2 {
                display: none;
        }

после:

Код Выделить Развернуть

       
.banner-1 {
            width:728px;
            height:90px;
            margin: 0 auto;     
        }