Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Адаптивная верстка
В настоящее время посетители заходят на сайты не только с настольного компьютера, но и с ноутбука, планшета, смартфона. При этом на устройствах с маленьким экраном часто текст слишком мелкий, ссылки практически некликабельны, элементы управления расположены слишком близко друг от друга.
Чтобы устранить эти недостатки стали разрабатывать отдельные мобильные версии сайтов. Но это долго, дорого и неудобно в поддержке.
Решение возникшей проблемы – адаптивная верстка, при которой CSS-стили меняются динамически для разной ширины окна браузера.
Пример
Пример адаптивной верстки - сайт domportretov.ru, где страницы адаптируется под несколько интервалов ширины окна браузера, сохраняя максимальный комфорт для посетителя:
Разработку адаптивной верстки чаще всего проводят от уже существующего сайта для большого экрана к экранам меньшего размера. Проверять результат работы можно разными способами:
- просто менять размер экрана браузера,
- расположить справа панель инспектора компонентов и менять ее ширину,
- использовать адаптивный дизайн браузера, нажав Ctrl+Shift+M в Firefox или Google Chrome.
Что используют для оптимизации сайта под мобильные устройства?
Метатег viewport
Мобильные браузеры по умолчанию принимают страницу сайта за страницу для обычного компьютера и масштабирует ее по ширине экрана телефона. В результате текст становится мелким, и посетителю, чтобы его прочесть, приходится увеличивать масштаб страницы.
Для корректировки размеров и масштабирования страницы с учетом ширины экрана устройства используют метатег viewport, который содержит инструкции для браузера.
Чтобы сообщить браузеру, что страница адаптируется к любым устройствам, в заголовок документа добавляют метатег viewport.
Пример
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Основные свойства метатега <viewport>
- width
- Ширина видимой области. Рекомендуемое значение: device-width.
- height
- Высота видимой области. Рекомендуемое значение: device-height.
- initial-scale
- Первоначальный масштаб страницы. Принимает значение от 1 до 5. Рекомендуемое значение: 1.
- minimum-scale
- Минимальный масштаб страницы. Принимает значение, которое должно быть меньше или равным initial-scale. Значение 1 запрещает уменьшение масштаба страницы.
- maximum-scale
- Максимальный масштаб страницы. Принимает значение, которое должно быть больше или равным initial-scale. Значение 1 запрещает увеличение масштаба страницы.
- user-scalable
- Разрешает или запрещает возможность масштабирования страницы. Принимает значение true или false.
Контент шире экрана – часто возникающая проблема, как только задан viewport.
Это происходит, если каким-то элементам задана большая фиксированная ширина.
Чтобы не появлялась горизонтальная прокрутка, ширину страницы задают на весь экран, при необходимости ограничивая ее свойством max-width.
Пример
.content {
width: 100%;
max-width: 1200px;
}
Медиа-запросы. CSS-стандарт Media Queries
Возможность применять различное оформление в зависимости от ширины окна дает CSS-стандарт Media Queries.
Медиа-запрос начинается с правила @media, после которого следует условие применения стилей, состоящее из типа носителя (в приведенном примере all), логического оператора (and) и медиа-функции (max-width: 360px).
Типы носителей
- all
- Все типы.
- Принтеры и другие печатающие устройства.
- screen
- Экран монитора.
- speech
- Речевые синтезаторы и программы для воспроизведения текста вслух. Например, речевые браузеры.
Устаревшие, хотя и корректные типы, которые не дают результата
- braille
- Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
- embossed
- Принтеры, использующие для печати систему Брайля.
- handheld
- Наладонники, смартфоны, устройства с малой шириной экрана.
- projection
- Проекторы.
- tty
- Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
- tv
- Телевизоры.
Логические операторы
- and
- Логическое И. Указывается для объединения нескольких условий.
- not
- Логическое НЕ. Указывается для отрицания условия. Оператор not оценивается в запросе последним.
- only
- Ключевое слово для старых браузеров, не поддерживающих медиа-запросы и считающих only типом носителя. Но так как такого типа не существует, то весь стиль целиком игнорируется. Современные браузеры воспринимают медиа-запрос с only и без only одинаково.
- ,
- Логическое ИЛИ. Перечисление нескольких условий через запятую означает, что если хотя бы одно условие выполняется, то стиль будет применён.
Основные медиа-функции
- width (min-width, max-width)
- Ширина окна браузера.
- device-width (min-device-width, max-device-width)
- Ширина экрана устройства.
- height (min-height, max-height)
- Высота окна браузера.
- device-height (min-device-height, max-device-height)
- Высота экрана устройства.
- orientation
- Ориентация устройства. Принимает значения portrait (портретная), если ширина меньше высоты или landscape (альбомная), если ширина больше высоты.
Пример
Задан размер заголовка:
h1 {
font-size: 72px;
}
На большом экране компьютера такой заголовок смотрится нормально, но для вертикального экрана смартфона он слишком крупный. Для экранов, ширина которых меньше или равна 360px, можно уменьшить размер шрифта с помощью медиа-запроса:
@media (max-width: 360px) {
h1 {
font-size: 42px;
}
}
Новые единицы размеров (vw, vh, rem)
- vw
- 1% от ширины окна браузера (viewport).
- vh
- 1% от высоты окна браузера (viewport).
Благодаря этим единицам теперь в CSS стало легко указать относительную высоту элемента.
Пример
body {
min-height: 100vh;
}
Размер шрифта при адаптивной верстке удобно задавать в rem (root em).
Эта единица измерения вычисляется на основе размера шрифта корневого элемента <html>
.
По умолчанию 1rem = 16px. Для простоты вычислений размер шрифта корневого элемента можно задать равным 10px.
Пример
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
h1 {
font-size: 7.2rem;
}
@media (max-width: 360px) {
body {
font-size: 1.4rem;
}
h1 {
font-size: 4.2rem;
}
}
Flexbox
Сейчас принято занимать всю ширину окна браузера. При этом активно используются горизонтальные списки, которые хорошо смотрятся и удобно читаются на экране настольного компьютера. Но на экране мобильного устройства элементы такого списка становятся слишком узкими. Надо превращать горизонтальный список в вертикальный.
Спецификация Flexbox позволяет контролировать размер, порядок и выравнивание элементов по горизонтали и вертикали, распределение свободного места между ними. Блоки при этом могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
Flexbox определяет CSS свойства для flex-контейнера и его дочерних элементов (в приведенном примере соответственно ul.flex и li.flex).
Пример
ul.flex {
display: flex; /* flex-контейнер */
flex-wrap: wrap; /* многострочный режим */
justify-content: space-between; /* элементы распределяются равномерно (первый – в начале строки, последний – в конце) */
}
li.flex {
display: inline-block;
flex-basis: 260px; /* базовая ширина элемента */
flex-grow: 1; /* все элементы одинаковой ширины */
max-width: 300px;
padding: 8px;
}
В результате: элементы списка растягиваются на всю доступную ширину (с ограничением в 300px):
На узком экране список станет вертикальным:
Используя Flexbox, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.
Адаптивная верстка таблиц
Таблицы на мобильных устройствах, как правило, выглядят плохо. Решить эту проблему можно разными способами. Вот несколько методов представления таблиц в удобном для пользователя виде на маленьких экранах:
-
Таблица с горизонтальной прокруткой. Самый простой метод.
Надо задать для ячеек таблицы
white-space: nowrap;
и поместить таблицу в блок сoverflow-x: scroll
. - Таблица с невидимыми столбцами. Суть метода заключается в том, что на экране с маленькой шириной скрываются менее важные столбцы.
-
Перевернутая таблица. Таблица транспонируется, т.е. столбцы превращаются с строки за счет применения
display: inline-block
Таким образом,<thead>
таблицы становится первым столбцом, а для<tbody>
используется
{overflow-x: auto; white-space: nowrap;}
- Больше не таблица. Заголовок столбца с помощью data-атрибутов ставится слева от содержания ячейки.
- Адаптивная таблица. Заголовок столбца с помощью data-атрибутов ставится над содержанием ячейки.
Читать дальше: @media screen для мобильных устройств
.
Прокомментировать/Отблагодарить