Урок 6: Адаптивная вёрстка - практика в примерах фотогалереи, колонки, меню

Без практики теория бесполезна. Поэтому в данном уроке мы рассмотрим следующие вопросы:

- Как грамотно оформить адаптивную вёрстку галереи (фотогалереи). Как сделать так, чтобы на странице выводились 3-4 фотографии, а для маленького размера уже 2, и для самых маленьких лишь одна фотка на всю страницу, а не 200-250px шириной.

- Как оформить адаптивную вёрстку боковой панели на сайте так, чтобы блок располагался слева (или справа), а при маленьком разрешении перемещался в верхнюю часть экрана или нижнюю.

- Как оформить адаптивную вёрстку меню на сайте, то есть не простую модернизацию размеров или перемещений, но и скрытие меню с кнопкой "развернуть меню" для iphone, ipad, android и других мобильных устройств и планшетов с маленьким разрешением. Зачем это делать? Всё очень просто, меню просто не поместится на экранах, поэтому придумали вот такое современное решение.

Практикуясь с этими элементами можно легко применить и к другим задачам те же подходы.