Так как очень много гаджетов с разными экранами, нам нужно установить какие-то требования на наш дизайн. Выгодно использовать дизайн, созданный для десктопов и лэптопов и на iPad тоже.
Минимальная ширина iPad в вертикальном расположении — 768px. Необходимо адаптировать нашу вёрстку до сжатия под это разрешение.
Давайте создадим файл responsive.css и подключим его последним. В нём мы будем описывать "отзывчивость" нашей вёрстки.
min-width
Минимальная ширина до которой может ужаться элемент при необходимости. Удобно использовать на тегах html и body для ограничения минимальной ширины страницы.
max-width
Максимальная ширина до которой может растягиваться элемент.
min-height
Минимальная высота до которой может ужаться элемент.
max-height
Максимальная высота до которой может растягиваться элемент.
Viewport Width & Viewport Height
Лучше узнать это сейчас. Кроме пикселей и процентов, есть ещё процент от непосредственно величины вьюпорта. Это удобная величина, с помощью которой можно удобно работать с так называемыми Single Page Applications.
vw
Расшифровывается как Viewport Width. Задаётся в величинах от 1 до 100.
vh
Расшифровывается как Viewport Height. Задаётся в величинах от 1 до 100.
Ниже приведён пример использования. Например, если вы не хотите, чтобы сайдбар сжимался меньше 50% от высоты вьюпорта.