Адаптивный веб-дизайн

Адаптивный веб-дизайн

 

Миграция с фиксированной вёрстки на адаптивную

Чтобы переделать сайт с фиксированным дизайном в сайт с адаптивным дизайном, достаточно (но не обязательно) изменить только таблицу стилей CSS, не меняя код HTML.

Первый шаг — гибкие шрифты

Размер шрифтов указываем не в абсолютных единицах — пикселях, а в относительных — em.

Например, размер 2em означает, что размер шрифта должен быть в 2 раза больше размера шрифта контекста (шрифта родительского контейнера).

Второй шаг — гибкая сетка

Ширину блочных элементов и ширину внешних полосок (margin) указываем не в абсолютных единицах — пикселях, а в относительных — в % от ширины родительского контейнера. Если высоту блочного элемента задать в %, то она тоже будет рассчитываться относительно ширины родительского контейнера, а не высоты.

Высоту блочных элементов и внешних полосок (margin), размеры внутренних (padding) полосок указываем не в абсолютных единицах — пикселях, а в относительных — в em.

Пример

article {
width: 50%;
margin: 1em 5%;
padding: 1em 2em;
}

Третий шаг — гибкие картинки

Для картинок необходимо задать правило, которое запретит картинкам выходить за пределы родительского контейнера:

img {
max-width: 100%;
}

Это правило сжимает большие картинки до размера маленького контейнера, но не увеличивает маленькие картинки до размера большого контейнера.

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

Четвёртый шаг — медиа запросы (Media Queries)

С помощью медиа запросов сайт узнаёт у браузера медиа тип устройства и его характеристики, и подбирает подходящие стили.

Медиа типы
Медиа тип Описание
all все типы устройств
print принтеры
screen экраны ПК
speech голосовые браузеры
Нерекомендуемые
braille устройства Брайля для слепых
embossed принтеры Брайля
handheld мобильные устройства
projection проекторы
tty устройства с фиксированным размером символов (телетайпы и терминалы)
tv телевизоры


Характеристики устройств
Характеристики Описание Значение Префиксы
min-/max-		 Пример
width ширина окна браузера длина + 1920px
height высота окна браузера длина + 1024px
device-width ширина дисплея длина + 10cm
device-height высота дисплея длина + 25cm
orientation ориентация устройства portrait или landscape
aspect-ratio соотношение ширины и высоты окна отношение + 16/9
device-aspect-ratio соотношение ширины и высоты дисплея отношение + 1280/720
color количество битов на цвет количество цветов +
color-index количество цветов целое число + 256
monochrome количество бит на пиксель для устройств с монохромными экранами целое число (0 — для цветных дисплеев) +
resolution плотность пикселей разрешение + 300dpi, 118dpcm
scan тип развёртки для телевизионных устройств progressive (прогрессивная) или interlace (чересстрочная)
grid тип устройства: grid или bitmap 1 — если устройство поддерживает только один шрифт (телетайп)
0 — для всех других устройств

Синтаксис медиа запросов

@media not|only mediatype and (expressions){
    CSS-Code;
}

Пример кода CSS

/*Маленькие экраны c вертикальной ориентаций*/
@media screen and (max-width: 768px) and (orientation: portrait){
#wrapper{width: 100%;}
body{font: normal 80% verdana, sans-serif;}
aside{display: none;}
section{width: 95%;}
nav li, ul {display: block;}
}
/*Маленькие экраны c горизонтальной ориентаций*/
@media screen and (max-width: 768px) and (orientation: landscape){
#wrapper{width: 100%;}
body{font: normal 90% verdana, sans-serif;}
aside{display: none;}
section{width: 95%;}
nav li, ul{display: inline-block;}
}
/*Средние экраны*/
@media screen and (min-width: 769px) and (max-width: 1279px){
#wrapper{width: 80%;}
body{font: normal 90% verdana, sans-serif;}
aside{width: 20%;}
section{width: 75%;}
nav li, ul{display: inline-block;}
}
/*Большие экраны*/
@media screen and (min-width: 1280px){
#wrapper{width: 70%;}
body{font: normal 100% verdana, sans-serif;}
aside{width: 25%;}
section{width: 70%;}  nav li, ul{display: inline-block;}
}