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

Автор Тема: Размер баннера в зависимости от разрешения экрана......  (Прочитано 2752 раз)

Оффлайн pro100snАвтор темы

  • Бизнес оценка: (0)
  • Пользователь
  • **
  • СПАСИБО: 9
  • Сообщений: 60
  • Карма: 1
    • Просмотр профиля
    • Кому за 40

Оффлайн pro100snАвтор темы

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


Оффлайн menvik

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 2
  • Сообщений: 11
  • Карма: 0
  • Пол: Мужской
    • Просмотр профиля
    • Магазин сантехники Санрай

Оффлайн menvik

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

Оффлайн alex-web

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 7
  • Сообщений: 20
  • Карма: 2
  • Пол: Мужской
  • Мне не надо много, достаточно самого лучшего.
    • Просмотр профиля
    • Блог о создании сайтов

Оффлайн alex-web

  • Рекрут
  • *
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 7
    • Сообщений: 20
    • Карма: 2
    • Пол: Мужской
    • Мне не надо много, достаточно самого лучшего.
      • Просмотр профиля
      • Блог о создании сайтов
через media-запросы или javascript-использовать

Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 493
  • Сообщений: 964
  • Карма: 86
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Clever

  • Ветеран
  • *****
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.

Оффлайн pro100snАвтор темы

  • Бизнес оценка: (0)
  • Пользователь
  • **
  • СПАСИБО: 9
  • Сообщений: 60
  • Карма: 1
    • Просмотр профиля
    • Кому за 40

Оффлайн pro100snАвтор темы

  • Пользователь
  • **
Спасибо всем!
Roffun, подскажите, сам код баннера где располагать? Точнее 2х баннеров.
Если не ошибаюсь, баннеры после @media условий должны идти? В самом конце?
« Последнее редактирование: 29-01-2016, 17:12:13 от pro100sn »


Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 493
  • Сообщений: 964
  • Карма: 86
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Clever

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

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


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


html:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
css:

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




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

Вот держите, накатал пример с вашим баннером, внутри генерируемого html каркаса. На большом будет показываться красный блок, на маленьких зеленый.
« Последнее редактирование: 29-01-2016, 17:42:00 от Roffun »

Оффлайн pro100snАвтор темы

  • Бизнес оценка: (0)
  • Пользователь
  • **
  • СПАСИБО: 9
  • Сообщений: 60
  • Карма: 1
    • Просмотр профиля
    • Кому за 40

Оффлайн pro100snАвтор темы

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

Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 493
  • Сообщений: 964
  • Карма: 86
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Clever

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

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

Оффлайн pro100snАвтор темы

  • Бизнес оценка: (0)
  • Пользователь
  • **
  • СПАСИБО: 9
  • Сообщений: 60
  • Карма: 1
    • Просмотр профиля
    • Кому за 40

Оффлайн pro100snАвтор темы

  • Пользователь
  • **
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Проверьте, пожалуйста, Roffun.


Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 493
  • Сообщений: 964
  • Карма: 86
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Clever

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

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


 

Похожие темы

  Тема / Автор Ответов Последний ответ
8 Ответов
2521 Просмотров
Последний ответ 20-06-2011, 01:13:22
от westj
8 Ответов
2660 Просмотров
Последний ответ 30-08-2011, 13:40:03
от endenwer
9 Ответов
3006 Просмотров
Последний ответ 19-09-2013, 02:01:34
от Сергей Коча
3 Ответов
848 Просмотров
Последний ответ 10-09-2014, 11:16:08
от Espresso
1 Ответов
2820 Просмотров
Последний ответ 15-12-2014, 17:24:11
от submaster