Раздел 4. ТЕХНОЛОГИИ АДАПТИВНОЙ ВЕРСТКИ САЙТОВ
Понятие и назначение адаптивной верстки
Верстка веб-страниц это создание структуры гипертекстового документа на основе HTML разметки c использованием таблиц стилей и клиентских сценариев, таким образом, чтобы элементы дизайна выглядели аналогично макету, который разработал web-дизайнер.
Адаптивная верстка это подход, предполагающий изменение дизайна в зависимости от поведения пользователя, размера экрана, платформы и ориентации устройства. Другими словами, страница должна автоматически подстраиваться под разрешение, изменять расположение блоков, размер картинок и т.д. Можно разбить устройства на разные категории и верстать для каждой из них отдельно, но это займет слишком много времени. Тем более, согласно статистике, существует целых спектр разнообразных устройств (рис. 4.1.).
В соответствии с современными стандартами, предлагается устанавливать 4 варианта отображения страниц на дисплеях в зависимости от количества экранных пикселей по горизонтали
- xs (extra small devices) — менее 768 пикселей (для смартфонов);
- sm (smаll devices) — от 768 до 991 пикселей (для планшетов);
- md (medium devices) — от 992 до 1199 пикселей (для ноутбуков);
- ld (large devices) — от 1200 пикселей (для десктопов).
Учитывая распространение в последние годы смарт-часов и инфо-браслетов, необходимо выделять еще один экранный класс устройств с разрешением дисплеев от 240 до 320 пикселей.
Рис. 4.1. Основные размеры экранов современных компьютеров
Для того, чтобы сайт корректно отображался на устройствах с экранами разных размеров и ориентаций, были разработаны следующие технологии.
Простейший способ – это задавать относительный (в %) размер картинок и других элементов страницы.
Пример: Минигалерея.
<div class="image_gallery">
<div>
<img src="../images/1.jpg" title="Деревья." />
</div>
<div>
<img src="../images/2.jpg" title="Зима" />
</div>
<div>
<img src="../images/3.jpg" title="Озеро" />
</div>
</div>
То есть мы добавили несколько изображений и поместили все в один div классаimage_gallery.
div.image_gallery {
margin: 0 auto;
width: 1000px;
text-align: center;
max-width: 90%; /*--- контейнер не превышает 90% ширины экрана */
min-width: 500px;
}
img {
float: left;
max-width: 48%;
height: auto;
padding: 1%; /*--- небольшие отступы для изображений ---*/
}
Каждое изображение в галерее теперь будет изменять свой размер в зависимости от контейнера. Так же мы добавили небольшой отступ по 1%.
Более сложный способ – для того, чтобы не растягивать и не сужать картинку – она заменяется ее урезанным фрагментом. Но, для того, чтобы переход к этому фрагменту выглядел плавным основная картинка «подкладывается» как фон в некоторый блок.
Еще одна техника – для маленьких экранов использовать не просто небольшое изображение, но и с меньшим разрешением. Подготавливаются две картинки и указывается тег:
<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">
Если же говорить о современных технологиях адаптивной верстки в целом, то существуют два основных направления.
Первое из них состоит в использовании сетки (Grid), которая позволяет условно разделять горизонтальное пространство экрана на определенное количество колонок (обычно 12), а затем, «вписывать» блоки в эти колонки, при необходимости объединяя их. При этом, если страница имеет более сложную структуру, в которой требуется не только горизонтальное, но и вертикальное выравнивание блоков, приходится использовать дополнительные, не всегда простые методы CSS.
Второе направление предлагает использовать спецификацию CSS Flexible Box Layout Module. Основное преимущество этой технологии верстки состоит в том, что все блоки очень легко делаются “резиновым”, что уже следует из названия “flex”. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство не только по горизонтали, но и по вертикали страницы.
Подробнее каждую из этих технологий мы рассмотрим, выполняя задания практикума.
CSS - фреймворки
Фреймворк (неологизм от framework – остов, каркас, структура) – программное обеспечение, определяющее структуру программной системы, облегчающее разработку и объединение разных компонентов большого программного проекта.
Часто понятие фреймворк употребляют как синоним слова библиотека подпрограмм. Однако, это более широкое понятие. В отличие от библиотек, фреймворки не просто предоставляют разработчику фрагменты готовых отлаженных функциональных модулей, а влияют на структуру проекта, определяют способ взаимодействия его составных частей.
CSS-фреймворк – это с одной стороны, набор готовых функциональных блоков, которые объединяют HTML-код и соответствующую таблицу стилей, а, с другой – некоторая идеология верстки. CSS-фреймворки созданы для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок верстки, например, проблемы совместимости различных версий браузеров и т. д.
При использовании фреймворков, CSS-библиотеки, обычно имеющие вид внешнего css-файла, «подключаются» к проекту (добавляются в заголовок web-страницы).
В настоящее время используется множество CSS-фреймворков, в том числе Semantic UI, Foundation, Sceleton, но одним из наиболее распространенных CSS-фреймворков сейчас является Bootstrap, который и будет рассмотрен ниже.
Использование Bootstrap
Процесс работы с bootstrap происходит следующим образом.
С сайта https://getbootstrap.com/ можно скачать комплект всех необходимых модулей, установить его в текущий проект и далее продолжать разработку локально. Или, можно подключить библиотеку по т.н. CDN (сети доставки и дистрибьюции контента), и подгружать нужные функции по мере необходимости on-line.
При скачивании bootstrap вы обратите внимание на то, что создается не только папка с css-файлами стилей, но и папка JS скриптов. Это объясняется тем, что многие из компонентов требуют использования JavaScript, поэтому часто bootstrap называют css и js – фреймворком. Подробнее о назначении и использовании JavaScript мы поговорим в следующем разделе.
На следующем шаге рекомендуется скачать с сайта базовый шаблон страницы, который уже содержит все необходимые строки подключения библиотек.
Далее с этого же сайта скачиваются нужные на странице компоненты: меню, списки, компоненты поиска, линейки прокрутки, элементы формы и т.д. Каждый из них представляет собой блок <div>, который описан на языке HTML и имеет в подключенной библиотеке уже готовый набор стилей. Разработчику нужно только поместить скачанный HTML код этого элемента в нужное место страницы, и, подправить стиль (через его переопределение в собственной таблице стилей), если это требуется в соответствии с дизайном сайта.
При этом, проблем остается только две:
1) как поместить элемент именно в нужное место таблицы;
2) что должно происходить с определенными элементами, если размер экрана будет изменен.
Решить первую проблему позволяют технологии сетки или flexbox, про которые мы уже упоминали ранее, а вторая проблема решается в bootstrap через т.н. медиазапросы. Рассмотрим эти технологии более подробно.
Сетка (Grid System) bootstrap позволяет горизонтально разделить страницу на 12 столбцов. Если использовать все 12 частей нет необходимости, такие блоки можно легко группировать, создавая более широкие столбцы. Они будут состоять из двух, трех и так далее частей страницы, разделённой на 12 частей. Это около 8.3% ширины всего экрана на столбец. Таким способом можно разделить не только страницу, но и любой блочный элемент, размеры подблоков будут рассчитаны как часть родительского элемента.
В Grid-верстке bootstrap есть те же четыре основных класса устройств: xs, sm, md, и lg. Удобство сетки состоит в том, что эти классы можно комбинировать, чтобы создавать адаптивную верстку и точно знать, как макет будет отображаться на том или ином размере экрана.
Базовая структура макета в bootstrap выглядит так:
<div class="row">
<div class="col-*"></div>
</div>
<div class="row">
<div class="col-*"></div>
<div class="col-*"></div>
<div class="col-*"></div>
</div>
<div class="row">
...
</div>
На основе базового макета создается любой другой. Описывается строка с ячейками: <div class="row"> и в нее добавляется нужное количество столбцов с соответствующими классами.col-*.
Обратите внимание, что сумма ячеек для каждого типа (sm, xs, md, lg) в ячейке.col-* не должна превышать 12 частей для каждой строки.
Этот пример показывает, как сверстать три равных по ширине колонки, которые будут отображаться горизонтально на планшетах и более крупных экранах. На экране мобильного такая верстка будет растянута и каждая из ячеек займёт всю ширину экрана (если ширина всех колонок одинакова, количество частей в колонке можно не указывать):
<div class="row">
<div class="col"> Содержимое первой колонки</div>
<div class="col"> Содержимое второй колонки </div>
<div class="col"> Содержимое третьей колонки </div>
</div>
В следующем примере страница делится на две колонки разной ширины, которые будут отображаться горизонтально на любых устройствах, кроме мобильных телефонов:
<div class="row">
<div class="col-4"> Содержимое первой колонки </div>
<div class="col-8"> Содержимое второй колонки </div>
</div>
Еще один пример: две колонки с двумя вложенными колонками
В этом случае страница будет разделена на две разные колонки на планшетах и больших экранах, а большая колонка в свою очередь будет разделена на две равные колонки. На экранах мобильных телефонов эти колонки будут растягиваться на всю ширину экрана.
<div class="row">
<div class="col-8"> Содержимое первой колонки
<div class="row">
<div class="col-6"> Содержимое первой встроенной колонки </div>
<div class="col-6"> Содержимое второй встроенной колонки </div>
</div>
</div>
<div class="col-4"> Содержимое второй колонки </div>
</div>
Таким образом легко можно контролировать, как отображать ячейки из шаблона, а вёрстка становится мобильной без дополнительных усилий.
Однако, для того, чтобы контролировать размещение блоков также по вертикали, используется т.н. решетка, которая реализована только в версии bootstrap 4 c помощью Flexbox.
Рассмотрим пример галереи на Flexbox [https://keynikell.ru/].
Пусть необходимо вывести 10 изображений.
Такой блок на HTML выглядит следующим образом:
<main class="gallery">
<img src="/img1.jpg">
<img src="/img2.jpg">
<img src="/img3.jpg">
<img src="/img4.jpg">
<img src="/img5.jpg">
<img src="/img6.jpg">
<img src="/img7.jpg">
<img src="/img8.jpg">
<img src="/img9.jpg">
<img src="/img10.jpg">
</main>
Тогда, CSS с flexbox позволяет сделать следующее:
| gallery { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content:center; align:center; } | /*Галерея займет все свободное пространство экрана*/ /*Все изображения уменьшатся, чтобы уместиться в одну линию*/ /*Разрешить переносить не поместившиеся элементы на следующую строку*/ /*Сохранять исходный размер изображений*/ /*Разместить блоки по центру по горизонтали*/ /*Разместить блоки по центру по вертикали*/ |
Очевидно что подобные, и гораздо более сложные настройки можно выполнять с использованием свойств flexbox над любыми блоками. Подробнее в [https://tproger.ru/translations/how-css-flexbox-works/]
Использование медиазапросов
Медиазапросы позволяют выполнять определенные действия со страницей при изменении ее размера.
Пример медиа-запроса:
@media screen and (max-width: 768px)
{
body {
font-size: 9pt;
}
}
Данный код означает следующее: "Если ширина окна браузера 768px, то применить стили, указанные в фигурных скобках".
Пусть имеется следующий HTML-документ:
<!DOCTYPE html>
<html>
<head>
<title>Медиа-запросы</title>
<style>
body {
font-size: 15pt;
}
@media screen and (max-width: 768px) {
body {
font-size: 9pt;
}
}
</style>
</head>
<body>
<p>Текст</p>
</body>
</html>
При попытке открыть этот код в браузере и начать уменьшать его размер, при достижении размера 768 пикселей текст заметно уменьшится.
Безусловно, в медиазапросах могут указываться и другие параметры, такие как min-width, max-height и min-height которые будут срабатывать при указанной ширине и высоте. Также, можно комбинировать разные параметры через and:
@media screen and (max-width: 768px) and (max-height: 300px) {
body {
font-size: 9pt;
}
}
В данном случае стили будут подключаться только при ширине меньше, либо равной 768px и при высоте меньше, либо равной 300px.
Контрольные вопросы:
1. Определите понятия «верстка» и «адаптивная верстка» web-страниц
2. Какие подходы, используемые при адаптивной верстке Вам известны?
3. Что такое фреймворк? Чем фреймворки отличаются от библиотек подпрограмм?
4. Что такое CSS-фреймворк? Какие CSS-фреймворки Вам известны?
5. Каковы основные возможности bootstrap?
6. Как верстается страница при применении bootstrap?
7. Поясните основные принципы использования Grid System в bootstrap.
8. Для чего используются медиазапросы?