Обучаемся.com

Руководство по компьютеру, работа с Windows, разработка и продвижение сайтов…

Автор

Flexible Media в адаптивной верстке

Привет, немного я ленился, но вот снова сел и приступаю к написанию очередной статьи посвященной адаптивной верстке с применением Flexible Media, то есть гибких медиа вставок на ваш сайт.

А теперь все по порядку, так как мы с вами используем в нашей верстке html5 теги нам нужно прописать следующее правило в css:

article, aside, details, figcaption, figure, footer, hgroup, menu, nav, section {
    display: block;

Что здесь написано вы уже знаете, а если нет я скажу. Мы всем основным тегам с HTML5 задали значение display:block, то есть все они теперь будут блочные. Хотя по умолчанию большинство браузеров признают и понимают эти теги и знают, что они блочные, это правило, как подстраховка для нас.

Вторым шагом есть подключение в служебном теге <head> … </head> библиотеки Respond.js, код у нее выглядит вот так:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

Этот скрипт, который мы подключили заставляет понимать IE 8 и 9 все теги с html5 верстки.

Это мы сделали обще подготовительную работу по адаптации сайта, понимаю отдельными браузерами html5 элементов и т.д. Но пора заняться тем, собственно ради чего вы и начали читать эту статью, а именно Flexible Media. Идем в свойства и прописываем вот такое правило для всех изображений:

img {
    max-width: 100%;
    height: auto;
}

С виду простое правило, а сразу кардинально меняет поведение изображений вашей адаптивной верстки. Итак мы имеем полноценную заготовку для верстки адаптивных страниц с использованием изображений, видео контента или флеша. И я себе сверстал простой пример страницы, которая в html выглядит вот так:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Responsive Template</title>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
       <div class="row">
           <div class="cols col-12">
               <h1>Привет</h1>
               <img src="img/Animals-Leopard.jpg" alt="тестовая картинка">
           </div>
       </div>

       <div class="row">
           <div class="cols col-3">Три</div>
           <div class="cols col-7">Семь</div>
           <div class="cols col-2">Два</div>
       </div>
    </div>
</body>
</html>

Две строки с блоками в первой после заголовка поместил изображение, которое в реальном размере у меня 2560 на 1140px. Но благодаря прописанному правилу сжимается пропорционально и без всяких выпадов за пределы блока.

Хотя все работает, как надо, но во всем этом есть огромный недостаток! Представьте себе страницу, на которой таких фото 20 штук, 826 КБ*20 шт. = 16.5 мб. Согласитесь очень много веса для одной страницы, а если ее грузить с мобильника и без wi-fi или 3G, ужас? Вот и я о том же и пора подумать, как решать эту возникшую проблему.

Применение Picturefill.js на практике

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

Всех свободно владеющих английским языком отправляю вот по такому адресу scottjehl.github.io/picturefill/, там очень подробно описаны методы использования и применения picturefill.js с которым мы сейчас знакомимся. Ну а тем, кто не дружит с иностранными языками я попытаюсь в нескольких словах описать суть данного скрипта.

Первый способ работы с Picturefill.js

Picture Fill использует элемент <span>. В атрибуте data-src=»medium.jpg» указываем какое изображение подключать, а в data-media=»(min-width: 400px)” при каком размере.

Но для этого нужно скачать сам скрипт по этой ссылке picturefill.js, потом подключаем его к нашему html документу, у меня это вот так выглядит:

<script src="js/picturefill.js" async></script>

Ну а после подключения добавляем изображения на нашу страницу вот таким способом:

<span data-picture data-alt="Дом в лесу">
                <span data-src="img/small.jpg"></span>
                <span data-src="img/medium.jpg"     data-media="(min-width: 400px)"></span>
                <span data-src="img/large.jpg"      data-media="(min-width: 800px)"></span>
                <span data-src="img/extralarge.jpg" data-media="(min-width: 1000px)"></span>

                <!-- Для отключённого JS -->
                <noscript>
                    <img src="img/the_house" alt="Дом в лесу">
                </noscript>
            </span>

Можете сохранить и потягать ваш браузер изменяя его размеры, но перед этим убедитесь в различных размерах ваших изображений. Хотя уверен многие уже запутались, поэтому выкладываю архив с изображениями, стилями css, скриптом picturefill.js и самим документом html. Скачав просто распакуйте и внимательно изучите содержимое html место вставки наших изображений.Исходник кода в примере

Второй способ работы с Picturefill.js

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

Все остается, как и в первом способе, тот же скрипт picturefill.js подключаем в служебном теге head, также делаем разные картинки под разные устройства, но вот уже само использование тегов в документе html другое и вот вам пример:

<picture>
                    <source srcset="img/Animals-Leopard.jpg" media="(min-width: 1000px)">
                    <source srcset="img/Animals-Leopard-large.jpg" media="(min-width: 800px)">
                    <img srcset="img/Animals-Leopard-medium.jpg" alt="Leopard">
               </picture>

Правда здесь я не 4, а три картинки использовал, но суть думаю вам понятна и так. Согласитесь код выглядит, как-то проще и понятнее, чем запутанные span  в первом примере. Но здесь есть еще небольшой нюанс следует в служебном теге head добавить небольшой скрипт для понимания IE тега <picture>, вот собственно и пример добавления скрипта:

<script>
        document.createElement( "picture" );
    </script>
<script src="js/picturefill.js" async></script>

В первом примере мы добавляли лишь первую строку, а здесь еще написали, что picture теперь является элементом страницы.

Flexible Media в фоновых изображениях

Мы выше говорили об изображениях применяемых в теле страницы, то есть это не фон (background), но пришло время поговорить и о фоне, ведь если можно подменять изображения в обычных тегах img, тогда как-то нужно их подменять и в фоне.

Для этого идем в наши стили и прописываем следующие правила:

.fluid-bg {
    max-width: 100%;
    height: 600px;
}

@media screen and (min-width: 45em) {
    .fluid-bg{
    background: #d2ed22 url("img/rive_ex.jpg") no-repeat top center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    }
}

@media screen and (max-width: 45em) {
    .fluid-bg{
    background: #d2ed22 url("img/rive_sm.jpg") no-repeat top center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    }
}

Я взял в html блок с классом row за основу для которого и применил фон, ему прописал еще один класс .fluid-bg и прописал правила приведенные в примере выше. А теперь все по порядку, что я там такое писал и для чего оно все нужно.

Первое правило указывает ширину в 100% и задает высоту, которая у самой большой картинки. У меня большая картинка для фона имеет высоту 600px вот я такую и указал. Далее идут уже очень хорошо знакомые нам медиа запросы. Первый для всех размеров выше 45em по ширине, а второй запрос для размеров меньше 45em. В каждом указаны соответствующие размеры изображений.

А теперь самое главное в этих правилах, свойство с css3 background-size: у этого свойства есть пять значений, я распишу только два остальные вы посмотрите в интернете при желании.

  • cover — Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
  • contain — Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Я использовал первое значение и дописал префикс для различных браузеров. Конечно можно было сделать не два размера фона, а скажем 4 или три, но для примера этого достаточно. Ну и конечно я с удовольствием предоставляю вам весь код с готовыми примерами. Всем хорошего настроения и понимания того, о чем я пишу. Исходник кода в примере

← Media queriesСледующее занятие →

5 Ответов в теме: Flexible Media в адаптивной верстке

  1. Серж says:

    Гляжу на это все и вспоминаю времена, когда заморачиваться вопросами адаптивности и кроссбраузерности было не нужно вообще. Это было очень удобно для верстальщика, правда, сайты тогда выглядели ужасно неприглядно. В новые времена приходится всему учиться заново. Спасибо за урок, полезно)

    • Андрей says:

      А я вот начал заниматься Версткой как раз во времена появления css3 и html5 и мне проще сразу было учить все новое. Хотя думаю при хорошем старании, ничего сложного в любом обучении нет. Главное желание и побольше практики.

  2. Интересный подход к адаптивности, такого еще не встречала, надо попробовать. Очень уважаю адаптивную верстку, т.к. только ее и применяем при создании сайтов, но именно respovsive вариант без fluid (резиновый).

  3. Как же раньше всё было просто с версткой, а теперь нужно доучиваться. Хорошо что есть такие люди как Вы, которые пишут подробные статьи на тему адаптивной верстки, спасибо Вам за это!

  4. DevakKnome says:

    А, что очень даже интересно,спасибо за информацию.

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

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