Адаптивный дизайн CSS

Установка Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Колонки

Header
Main

Some content

here

Media Queries

@media not|only ТИП_МЕДИА and (ЗНАЧЕНИЕ ДЛЯ МЕДИА) {
   КОД CSS;
}

Типы медиа

Значения для медиа

Примеры media

Orientation: landscape
Orientation: portrait
Min-aspect-ratio: 1/2
Width: 400px
Max-width: 400px
Max-width: 500px
Min-width: 400px
Hover