Организация вложенного контента в адаптивном дизайне.

Некоторые HTML элементы не могут функционировать в адаптивных шаблонах. Одним из таких элементов является хорошо известный вам iframe, который многие из вас наверняка использовали при вставке контента с внешних источников, например, таких как YouTube.

В этой статье мы расскажем вам о том, как организовать адаптивный вложенный контент с помощью CSS. Этот контент, например, видео и календари, сможет изменять свой размер в зависимости от области отображения браузера. Для тех случаев, когда размещением видео на вашем веб-сайте будет заниматься человек, который не знаком с написанием и отладкой текстов программ, и если вы не хотите доверять ему организацию дополнительной разметки, вместо CSS мы рассмотрим решения, которые основаны на JavaScript.

(Вы можете увидеть демонстрацию этих подходов на моем блоге).

Разметка для вложенного контента.

Такие сервисы, как YouTube предоставляют пользователям код, который можно скопировать и вставить на веб-сайт, чтобы организовать вложенный контент. Как правило, я всегда рекомендую своим клиентам использовать видео с YouTube, поскольку такой подход позволяет им экономить место на сервере. К тому же, независимо от браузера или устройства пользователя, YouTube будет отображать видео правильно. Два наиболее популярных способа размещения видео на сайте связаны с использованием HTML5 элемента video, который не работает в старых версиях Internet Explorer, и с Flash, который не работает на устройствах с iOS и не совсем соответствует действующим стандартам.

При внедрении контента из внешнего источника, код будет включать в себя элемент iframe:

<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>

Элемент iframe позволяет отобразить на вашем веб-сайте внешнее содержимое. Такая возможность существует благодаря тому, что в его структуру включен URL-адрес, который указывает на источник потокового контента.

Думаю, вы заметили, что кроме всего прочего элемент iframe также включает атрибуты width и height. Если вы удалите эти атрибуты, то iframe исчезнет, поскольку он не будет иметь размеров. И, к сожалению, вы не можете исправить это в таблице стилей.

Атрибут width означает, что на экране уже, чем 560 пикселей, встраиваемый контент будет выступать за пределы содержащего его элемента, нарушая тем самым организацию шаблона. В приведенном ниже примере я добавил на страницу своего блога рассмотренный нами код. Скриншот взят из iPhone в портретной ориентации (320 пикселей в ширину), а остальная часть страницы была урезана ровно настолько, чтобы встраиваемое содержимое могло поместиться на экране. Очень далеко от идеала, не правда ли!

Данный скриншот взят из iPhone в портретной ориентации (320 пикселей в ширину). (Увеличенная версия изображения).

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

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

Разметка.

Чтобы сделать вложенный контент адаптивным, необходимо добавить контейнерную упаковку вокруг iframe. Ваша разметка будет выглядеть следующим образом:

<div>
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>

Следующий шаг заключается в добавлении к этой новой упаковке стиля и размещении внутри нее элемента iframe.

CSS.

Во-первых, мы должны стилизировать упаковку с помощью класса .video-container. В соответствии с предложением Тьерри Кобленца (Thierry Koblentz), выдвинутым в его ALA (Американская библиотечная ассоциация) статье под названием «Создание внутренних пропорций для видео», в нашей таблице стилей мы можем использовать следующий фрагмент:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

Этот фрагмент позволяет выполнить несколько вещей:

Установка position в relative позволяет нам использовать абсолютное позиционирование для самого элемента iframe.
Значение padding-bottom рассчитывается из соотношения сторон видео. В нашем случае это соотношение равно 16:9. Это означает, что высота будет составлять 56.25% от ширины. Видео с соотношением сторон 4:3 будет иметь значение padding-bottom. 75%.
Значение padding-top установлено на отметке в 30 пикселей, чтобы создать эффект хромирования — это относится только к видео на YouTube.
Значение атрибута height установлено в 0, поскольку требуемою элементу высоту дает padding-bottom. Мы не устанавливаем значение ширины, поскольку размер адаптивного элемента, содержащего этот div, будет изменяться автоматически.
Установка overflow в hidden гарантирует, что любой контент, выступающий за область элемента будет скрыт от просмотра.

Нам также необходимо стилизировать сам iframe. Добавьте следующий фрагмент в таблицу стилей:

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Этот целевой iframe внутри контейнера с классом .video-container. Давайте работать с использованием кода:

Абсолютное позиционирование используется элемент-контейнер имеет высоту 0. Если iframe имеет нормальное позиционирование, то мы должны задать значение высоты равное 0.
Свойства top и left позволяют достигнуть требуемого позиционирования iframe в элементе-контейнере.
Свойства width и height гарантируют, что видео занимает 100% от пространства, используемого элементом-контейнером (который на самом деле представляет собой незаполненное пространство).

Если вы правильно установите все эти значения, то видео будет изменять размер в соответствии с шириной экрана. Вот как это будет выглядеть на рабочем столе:

Скриншот домашней страницы, на которой размер видео изменяется в зависимости от ширины экрана (Увеличенная версия изображения).

А вот как это же видео будет выглядеть на экране, который имеет ширину 320 пикселей:

Видео на экране шириной 320 пикселей. (Увеличенная версия изображения).

Давайте перейдем к другим источникам вложенного контента — в частности, Google календарям.

Адаптивный календарь.

Разметка.

В целом CSS, позволяет сделать адаптивной любую форму вложенного контента. Однако различный контент будет иметь различные форматы, а значит, вы должны будете установить соответствующее padding-bottom значение.

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

При отображении календаря на маленьком экране нарушается структура проекта (Увеличенная версия изображения).

Разметка для вложенного календаря выглядит следующим образом:

<iframe src="https://www.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&amp;color=%232952A3&amp;ctz=Europe%2FLondon" s ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


 		
		
				
		
				
			  Главная   →  Мобильные приложения  → 27.02.2014  by  Newsbot