Несколько способов адаптивной вёрстки шапки сайта под разные устройства:

1. Резиновый макет. 1 Ключевые блоки сайта сжимаются, пока не достигнут размера экрана мобильного устройства. 1 Если сжатие применить невозможно, то блоки располагают друг за другом в виде ленты. 1
2. Перемещение блоков. 1 Подходит для сайта с большим количеством колонок. 1 Расположение сайдбаров (дополнительных блоков) меняется в зависимости от ширины экрана: экран уменьшается — сайдбары перемещаются вниз макета. 1
3. Переключение макетов. 1 Это трудоёмкий способ, который заключается в том, что каждому разрешению экрана соответствует свой, специально разработанный макет. 1
4. Элементарная адаптивная вёрстка. 1 Способ, наиболее подходящий для простых сайтов. 1 Верстальщик просто масштабирует изображение и типографику. 1

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