Как сделать адаптацию под разные экраны html css

Как подогнать html и css под разные устройства [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы на него можно было дать ответ, основанный на фактах и цитатах.

Закрыт 9 месяцев назад .

Понимаю, что вопрос тупой, но мне хочется получить однозначный ответ. Как сайт должен определять, на каком устройстве он работает ? А то на мобильных устройствах всё плывёт:< p.s На всякий случай, если это вдруг как-то связанно, то я работаю в Django

Адаптивные баннеры на HTML5 и CSS3

Адаптивный веб-дизайн — значительное достижение для всего Интернета. Мы больше не скованы давно устаревшей моделью «печатной страницы» со статическим содержимым, разбитым на области фиксированного размера. Сегодня Интернет способен жить, дышать и приспосабливаться, заполняя всё пространство, доступное на экранах различных устройств, начиная от мобильных телефонов — и вплоть до огромных видеодисплеев. Это то, какой и предполагалась Глобальная сеть.

Но есть небольшая проблема. Веб-сайты зачастую содержат баннерную рекламу и традиционные баннеры, не обладающие особой гибкостью. Как flash-, так и GIF-баннеры имеют фиксированные размеры, из-за чего несовместимы с современной адаптивной вёрсткой. Нам необходим новый метод создания баннерной рекламы. Нам нужны «адаптивные» баннеры.

Новый формат баннеров

  • HTML-реклама доступна повсеместно, а семантическая разметка сделает её подходящей для скрин-ридеров;
  • текст, изображения, видео, скрипты и формы — всё это может быть использовано в баннере точно так же, как и на любой веб-странице;
  • при необходимости баннеры могут задействовать динамические сценарии и базы данных на серверной стороне;
  • в баннер могут быть внесены изменения уже после его размещения;
  • файл (набор файлов) HTML-баннера может иметь весьма скромный размер;
  • banner serving, по существу, сводится к веб-хостингу;
  • веб-разработчикам не нужно изучать что-либо новое — все технологии остаются теми же, что и при обычной веб-разработке;
  • и, конечно, при помощи CSS3 медиа-запросов можно заставить HTML5-рекламу «подстраиваться» под любые размеры — ведь именно такое поведение мы ожидаем от адаптивных баннеров!

Как же этого достичь?

Во-первых, баннер создается как резиновая HTML5-страница. Мы наполняем её текстом, изображениями, ссылками на требуемую страницу, украшая всё это при помощи CSS3. Во-вторых, такой баннер может быть размещен на любом веб-сайте посредством плавающего фрейма iframe. Есть одна хитрость, задействующая CSS3 медиа-запросы чтобы сделать динамическими размерности iframe’а, и вскоре я расскажу о ней… Однако, по большому счёту, это всё!

Время небольшой демонстрации

Вот пример HTML5-баннера популярного формата 125 x 125 px («квадратная кнопка»). А вот пример того же баннера с измененной шириной. Обратите внимание, как этот баннер ведет себя при изменении размеров окна браузера. Изящно, не правда ли? 🙂

Новое соглашение о размерах баннеров

Адаптивная вёрстка требует, чтобы элементы страницы имели переменную ширину, поэтому баннеры тоже должны придерживаться этого соглашения. Высота в адаптивной разметке не столь важна, т.е. мы может выбрать любое необходимое нам значение высоты. Но это не значит, что наш баннер «завязнет» на этом значении — мы можем определить множество значений для любого баннера!

Для сохранения обратной совместимости адаптивные баннеры должны иметь те же значения высоты, что и традиционные. Теоретически мы можем создать баннеры, работающие с любой шириной/высотой, но их слишком сложно конструировать или тестировать. Я предлагаю отталкиваться от минимальной ширины в 88 px и придерживаться следующего набора стандартных высот:

  • микро полоса (88 x 31)
  • кнопка 2 (120 x 60)
  • половина длинного баннера (234 x 60)
  • длинный баннер (468 x 60)
  • кнопка 1 (120 x 90)
  • горизонтальный (ведущий) длинный (728 x 90)
  • квадратная кнопка (125 x 125)
  • вертикальный баннер (120 x 240 *Достаточно близко!)
  • всплывающий квадрат (250 x 250)
  • прямоугольник средней величины (300 x 250)
  • вертикальный прямоугольник
  • небоскрёб (120 x 600)
  • широкий небоскрёб (160 x 600)
  • объявление на полстраницы (300 x 600)

Самым замечательным является тот факт, что 14 общепринятых форматов баннеров сводятся всего к семи, причём все они могут быть представлены всего одним HTML5-баннером! В добавок, мой демо-баннер занимает менее 25k вместе со всеми составляющими (HTML, CSS и JPG-изображение).

Опробуйте эти новые форматы в моём приложении для проверки адаптивных баннеров — с его помощью вы можете тестировать и свои собственные баннеры. Измените размер окна браузера чтобы увидеть, как все они «приспосабливаются».

Изменение размера iframe’а при помощи CSS медиа-запросов

Иногда может потребоваться, чтобы ваш баннер адаптировался ещё и по высоте — достичь этого можно путем изменения размера iframe’а при помощи CSS медиа-запросов. Я обнаружил, что лучший способ сделать это — назначить высоте и ширине iframe’а значение 100% и обернуть его div’ом со специальным набором размеров в CSS. Вот как это выглядит:

Откройте CSS-файл моего адаптивного баннера, чтобы рассмотреть рабочий пример.

Отслеживание (трекинг) показов и кликов

Ещё одна замечательная особенность HTML5-баннеров состоит в том, что их можно отслеживать в Google Analytics — как и обычный веб-сайт. Фактически, мы получаем намного больше данных, чем от типичной системы показа рекламы. Вы можете надежно отследить не только количество показов баннера (banner impression tracking), но и рефереров, браузеры, разрешения экранов, мобильные устройства, популярные страны/города и много чего ещё!

Кроме того, задачу отслеживания количества кликов по баннеру можно легко решить, воспользовавшись одним из множества бесплатных сервисов сокращения ссылок. Лично я предпочитаю bit.ly. Если ваш баннер содержит большое количество ссылок, вы сможете отследить их по отдельности. Только не забудьте добавить target="_top" в гиперссылки, чтобы реклама «вышла» за пределы фрейма, полностью захватив окно браузера.

Хранение размеров баннера в мета-тегах

Адаптивные баннеры можно заставить поддерживать любой набор размеров, но, чтобы не прочёсывать CSS в поисках поддерживаемых значений высоты, я предлагаю записывать их в теге META. Взгляните на пример:

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

Подводя итог вышесказанному

Для адаптивной вёрстки нужна баннерная реклама с переменной шириной, я и считаю, что HTML5 подходит для этого как нельзя лучше. При помощи маленького CSS-трюка мы можем создать баннер, который один способен принимать все распространённые в настоящее время форматы. Скачайте пример моего баннера и попробуйте сами написать что-то подобное. Не забудьте протестировать ваше творение в моём приложении для проверки адаптивных баннеров. Если вы хотите разместить адаптивный баннер в своём блоге или на веб-сайте, просто скопируйте нижеприведенный код (только установите нужный размер):

Свяжитесь со мной, если у вас есть любые предложения или багфиксы. У меня не было возможности протестировать всё в IE… У меня сын, которому всего 11 дней, и 20-месячная дочь, поэтому у меня не так много свободного времени… Невероятно, но мне всё же удалось дописать эту статью!

Скромное мнение переводчика

Некоторые достаточно критично относятся к внедрению HTML5 (связки HTML5+CSS3+JavaScript) в различные области разработки: создание баннеров, игровая индустрия и проч. И я не могу не согласиться, что сегодня существует достаточно проблем, связанных с производительностью (CSS3 Transition, JavaScript), отсутствием достаточно мощных дизайнерских инструментов (Adobe Flash vs Adobe Edge) или необходимостью изучения и разработки новых технологий, приёмов и подходов. Но лично для меня очевидно, что все эти проблемы некритичны, поэтому, с учётом темпа развития всего и вся в IT, остается лишь немного подождать.

CSS3: как адаптировать анимацию под разные размеры экрана?

Есть блок, который становится видимым на устройствах шириной экрана < 767px. В нём посредством анимации движется лента картинок — туда и обратно:

При размере экрана в 767px лента (чтобы её можно было просмотреть целиком) должна смещаться на 1140px. Но если экран будет меньше, то смещение, соответственно, должно увеличиваться, иначе часть ленты останется за кадром.

Вручную подгонять смещение под каждые 5-10px — не вариант. С процентами тоже работает криво.

Как сделать, чтобы лента картинок на любом экране "доезжала" до своего конца и возвращалась обратно?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *