Адаптивная вёрстка сайта позволяет web-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Она предполагает отсутствие горизонтальной полосы прокрутки и масштабируемых областей при просмотре на любом устройстве, читабельный текст и большие области для кликабельных элементов.
С помощью медиазапросов можно управлять компоновкой и расположением блоков на странице, перестраивая шаблон таким образом, чтобы он адаптировался под разные размеры экранов устройств.
С помощью медиазапросов можно управлять компоновкой и расположением блоков на странице, перестраивая шаблон таким образом, чтобы он адаптировался под разные размеры экранов устройств.
Правила адаптивной верстки
1. Задать метатег VIEWPORT
<meta name="viewport" content="width=device-width, initial-scale=1.0">2. CSS Media Queries
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* Стили для мобильного устройства с разрешением указанные в свойствах @media */
/* Это пример для экрана iphone5, но можно задать для любых других разрешений */
}В браузерах можно смотреть как будет выглядеть ваш сайт. На сайте нажмите в любом месте правую кнопку мышки и нажмите «Просмотреть код»:
В открывшемся окне нажмите на значок (toggle device toolbar):
Из списка выберите нужное разрешение экрана и посмотрите как выглядит сайт:
3. Задать свойства CSS в процентах
Например, width: 100%;Гибкие изображения
Работа с картинками — одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:
img {max-width: 100%;}