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

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

Сообщений: 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

Сообщений: 10571 Регистрация: Мар 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 отказывается от рекламных блоков в виде ссылок

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

Новые темы	Объявления	Свободное общение
15:08 Стоит ли добавлять сайт в Rambler топ 100? 12:59 Absence в Армении 19:29 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 17:29 Как продвигать сайт с неуникальным контентом 14:50 Индексация страниц 12:36 У кого новостник, дайте пару советов плиз 13:53 AviTool - мощный инструмент для автоматизации работы с Avito	21:59 Продам копию сайта. 21:44 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 17:24 A-Parser 1.1 - продвинутый парсер поисковых систем, Suggest, PR, DMOZ, Whois, etc 14:01 Продам аккаунты Gmail USA IP \| Gmail MIX IP \| Outlook Old 13:15 SOCKS5 приватные прокси на 30 дней для PayPal 13:14 Google Voice аккаунты для бесплатных SMS и звонков 13:13 PayPal аккаунты для любых целей	22:09 Добро пожаловать в цифровой мир... 21:28 Ну что, кто куда деваете свои сайты? 19:42 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор 22:08 Накрутка поисковых подсказок 05:04 Точные прогнозы на футбол 14:01 Union Pharm - топовая фарма-партнерка для профессионалов! 10:59 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди