Адаптивный блок

Адаптивный блок, Как его правильно реализовать?

Сообщений: 87 Регистрация: Окт 2014

7 Ноября 2014 22:15

Делаю адаптивный дизайн. СО всем разобрался, даже комментарии ВК адаптировал, а вот один очень удачный баннер 728х90 не знаю как спрятать. Есть два варианта - сделать два баннера - 728 и 468. При больших расширениях показывать div с 728 а при маленьких 468, или ставить адаптивный. Но не могу понять как адаптивному размеры задаются. Разве что вот так

Код
<div style="width:100%; height:90px"> код адаптивного блок </div>

Или как?

Cesaro

Сообщений: 137 Регистрация: Сен 2014

8 Ноября 2014 15:20

насчет адаптивного не скажу, а вот первый вариант я бы не делал - есть риск попасть под гнев гугла из-за игр ос скрытием блоков. Ему до лампочки что вы таким образом адаптацию делаете

Coder

Сообщений: 10626 Регистрация: Мар 2013

8 Ноября 2014 16:52

Ежеле правильно понял, об чем речь

Код
<div style="max-width:100%; height:90px"> код адаптивного блок </div>

✓ Проверенные скрипты и полезности для сайта

✓ Курсы

✓ Сервис временных ссылок

Леон

Сообщений: 419 Регистрация: Июл 2012

8 Ноября 2014 19:23

Проще так

Код

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Адаптивное объявление адсенс -->
<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-456456456456456"
     data-ad-slot="456456456"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

В google поищите там все подробно про адаптивные объявления.

SynyAlex

Сообщений: 1305 Регистрация: Июл 2012

8 Ноября 2014 19:46

Встречал и такой вариант -)

Код

... if ( adWidth >= 728 ) google_ad_size = ["728", "90"]; /* Leaderboard 728x90 */  else if ( adWidth >= 468 ) 
 google_ad_size = ["468", "60"]; /* Banner (468 x 60) */  else if ( adWidth >= 336 ) 
 google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */  else if ( adWidth >= 300 ) 
 google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */  else if ( adWidth >= 250 ) 
 google_ad_size = ["250", "250"]; /* Square (250 x 250) */  else if ( adWidth >= 200 ) 
 google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */  else if ( adWidth >= 180 ) 
 google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */  else  google_ad_size = ["125", "125"]; /* Button (125 x 125) */  ....

Cesaro

Сообщений: 137 Регистрация: Сен 2014

9 Ноября 2014 00:36

SynyAlex, а на чем это? На CSS не похоже, на js тоже smile:confused:

SynyAlex

Сообщений: 1305 Регистрация: Июл 2012

9 Ноября 2014 00:46

Цитата
Cesaro пишет: а на чем это?

php.

Volfik

Сообщений: 87 Регистрация: Окт 2014

9 Ноября 2014 15:18

Леон, спасибище большое. Вышло как в лучших домах Парижа smile:)

. жалко что у гугла нету баннера между 468 и 728, но тут уже ничего ен поделаешь.

Цитата
SynyAlex пишет: php

А как php работает с размером экрана? это же серверное приложение, а не клиентское. Или я что-то не так понял?

Артём

Сообщений: 801 Регистрация: Мар 2013

18 Ноября 2014 01:08

Ребята, подскажите тип этого блока:
[img]http://fastpic.ru/view/64/2014/1118/aae7d3436ef66fbd25b4cd1b6a3ce30e.jpg.html[/img]

Изменено: Артём - 18 Ноября 2014 01:09

StrayTr

Сообщений: 169 Регистрация: Май 2012

#10

18 Ноября 2014 01:26

Цитата
Volfik пишет: А как php работает с размером экрана? это же серверное приложение, а не клиентское. Или я что-то не так понял?

Эффективно никак не работает. Все верно - это серверная часть.

Артём, возможно 580х400, текстовое. Или "Особый размер", или адаптивный...вариантов много

александр

Сообщений: 327 Регистрация: Авг 2014

#11

18 Ноября 2014 01:52

}
img {
max-width: 100%;
height: auto;
} пропробуйте такой код, я такой использовал для адаптации картинок, но думаю он подойдет

Иван

Сообщений: 2247 Регистрация: Янв 2014

#12

18 Ноября 2014 02:16

Цитата
александр пишет: } img { max-width: 100%; height: auto; } пропробуйте такой код, я такой использовал для адаптации картинок, но думаю он подойдет

такое катит на некоторых тизерках (напр. тизернет), но не на всех. На адсенс также не помоет...

Vizual

Сообщений: 116 Регистрация: Сен 2014

#13

19 Ноября 2014 01:57

Леон предоставил наиболее корректный код. Тоже так себе баннер настроил. Спасибо большое. Жаль не знаю как тут репутация ставиться

SynyAlex

Сообщений: 1305 Регистрация: Июл 2012

#14

19 Ноября 2014 02:54

Цитата
Vizual пишет: Жаль не знаю

наверное тут Рисунок

константин лебедев Сообщений: 102 Регистрация: Ноя 2014	#15 19 Ноября 2014 07:07 Если речь об адсенсе идет, то чем адаптивный блок от адсенса не устраивает?

Похожие темы:

08.03.2022 21:43	Аккаунты YouTube и AdSense в ЛНР и ДНР блокируются
09.01.2022 18:24	Может Адсенс ли из-за частых жалоб на сайт, заблокировать весь аккаунт?
04.01.2022 12:51	Проблема с расставкой блока
10.03.2021 15:24	Самому блоки располагать, или положится на гугл
14.12.2020 22:24	Google AdSense отказывается от рекламных блоков в виде ссылок

Читают тему (гостей: 2, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
18:44 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 13:12 Покупные ссылки 12:57 Rotapost прикрыли! Чем пользоваться? 17:00 Стоит ли добавлять сайт в Rambler топ 100? 15:12 Ночной бар в Паттайе: как случайная встреча с "тайкой" и её кадыком перевернула мой взгляд на продвижение сайта в Google 2026 15:01 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 07:24 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг	20:07 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 16:31 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 15:37 Продажа лидов: форекс, инвестиции, нативка, гемблинг, чарджбеки 14:49 Рассылки СМС/SMS, Вайбер/Viber, Ватсап/Whatsapp, Телеграм/Telegram любой тематики по всему миру 01:31 Продам обменник криптовалюты, а также новый обменник под ключ с обучением. Скидки на скрипты обменника 01:07 Full-Stack Developer — Сайты и Софт любой сложности \| Developer Websites and Soft of any Complexity! 20:42 E-currency.exchange — ваш помощник в мире обменов	18:35 С юмором по жизни! 22:59 Про мясо 15:07 Добро пожаловать в цифровой мир... 22:12 BYTIK.shop – сервис по продвижению в популярных социальных сетях 10:10 накрутка трафика в SimilarWeb 16:50 Компьютерная мышь 23:03 Точные прогнозы на футбол