Адаптивная вёрстка

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

Первое, что нужно понять - это то, что адаптивная вёрстка - это не резиновая. Резиновая вёрстка сжимается при уменьшении ширины экрана, тогда как адаптивная вёрстка не сжимается, а именно адаптируется под ширину. Как это происходит? Это делается через так называемые медиа-запросы в CSS, о которых мы поговорим в следующей статье.

Эти медиа-запросы позволяют менять вёрстку при изменении ширины экрана. Например, можно сделать так, чтобы если ширина окна больше 800px, то, например, отступы на странице в body 10px. А при ширине 800px и меньше, например, 3px. Это и есть пример адаптивной вёрстки.

Таким образом, можно адаптировать вёрстку даже под совсем маленькие экраны с мизерным разрешением.

Другими словами, адаптивная вёрстка - это отдельные стили для разных случаев. Для устройства с одним разрешением - одни стили, для устройства с другим разрешением - другие.

В следующей статье мы разберём основной механизм адаптивной вёрстки - медиа-запросы.