Особенности адаптивной верстки

Здравствуйте, уважаемые читатели XoZbloga! Когда говорят об адаптивной верстке, то подразумевают шаблон, который подстраивается под любое разрешение экрана. Элементам контейнерам div присваивается относительная ширина, правильное позиционирование и тд. Но также не следует забывать о содержимом этих контейнеров. Да, текст подстроиться по ширине автоматически, но как же быть с изображениями, видео и аудио элементами на странице. Ведь если где-то, что-то вылезает за пределы или торчит не в том месте — это не совсем хорошо. В этой статье разберемся, как же поступить с медиа элементами используя адаптивную верстку при создании сайтов.

Адаптивные изображения


адаптивные изображения

Вот простые правила CSS, для адаптации изображений на веб-странице.

img {
  max-width: 100%;

  /* на всякий случай, чтобы сохранить пропорции */
  height: auto !important;
}

И если вы все еще заботитесь о корректности отображения в IE7 (хотя даже гугл уже официально отказался от поддержки браузеров IE по 8 версию), чтобы изображение не выглядело ужасным на маленьком экране, вот фитча:

img {
  -ms-interpolation-mode: bicubic;
}

Адаптивное видео

Если вы пользуетесь HTML5 <video>, то ситуация с адаптацией аналогична изображениям:

video {
  max-width: 100%;

  /* на всякий случай, чтобы сохранить пропорции */
  height: auto !important;
}

Однако, куда большей популярностью пользуются сервиса видео хостинга Vimeo и YouTube. Да действительно куда удобней залить туда видеофайл получить HTML-код и вставить где нужно. Когда вы вставляете видео с этих сервисов, вы используете <iframe>. Да, внутри <iframe> может быть и HTML5 <video>, но вам не придется иметь с ним дело.

Таким образом надо решить проблему адаптации <iframe> под размеры страницы. Для этого «обернем» HTML-код для вставки видео в два блока div:

<div id="containingBlock">
   <div class="videoWrapper">
      <iframe width="560" height="315" src="http://www.youtube.com/embed/mhZiNBwCPXU" frameborder="0" allowfullscreen></iframe>
   </div>
</div>

и используем вот такие правила для этих блоков и тега <iframe>:

#containingBlock {
  width:70%;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Ширину блока (с id containingBlock) можно установить какую угодно (только в процентах). Другой блок (с классом videoWrapper) позиционировать относительно, а плавающий фрейм (iframe) абсолютно. Это сделано для того, чтобы определять координаты iframe от границ родительского элемента (блока div videoWrapper).
Отступ сверху в 25px — это место для панельки управления видео. Отступ снизу в 56,25% — это чтобы создать соотношением сторон видео 16:9, мы должны разделить 9 на 16 (0,5625 или 56,25%). Ну и ширина и высота самого фрейма в 100%. Автор данного решения.

Плагин FitVids.js

Если вы используете JQuery, и хотите автоматизировать описанное выше решение, я предлагаю вам попробовать FitVids.js. Этот небольшой плагин написанный на JQuery использует тот же способ, что мы рассмотрели выше но без вашего вмешательства. Все что нужно, подключить его и соответственно библиотеку JQuery. На мой взгляд это проще и удобней!


Плагин FitVids.js

Данный плагин работает с такими проигрывателями как:

  • YouTube;
  • Vimeo;
  • Blip.tv;
  • Viddler;
  • Kickstarter.

Пользуетесь MediaElements.js?

Этот плеер решает много проблем с использованием HTML5 видео, но на изменение разрешения экрана не реагирует. Дабы избавиться от этого недоразумения нижеследующий фрагмент CSS правил:

  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: auto !important;
}
.mejs-overlay-button {
  margin: 50px 0 0 -38px !important;
}
.mejs-mediaelement video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}

HTML5 audio

Также не стоит забывать об аудио файлах, точнее их проигрывателях. Адаптируется HTML5 audio вот так:

<audio controls src="sample.ogg">
  <p>Не работает.</p>
</audio>

В данном случае просто играем шириной элемента. Да кстати в WebKit браузерах максимальная ширина этого элемента 800px, в Opera и Firefox такого ограничения нет.

audio {
  width: 100%;
}

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

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницы сайта в соц. сетях — ссылки сверху. Если Вы используете какой-то другой способ, напишите о нем в комментарии. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!