Адаптивна верстка через jquery

Відео: jQuery # 1: Адаптивне меню

Відео: Створення адаптивного Mega Menu. HTML сніпети # 2

У попередній статті ми розібрали медіа-запити в CSS, які є ключовими в адаптивної верстці. Але на практиці не завжди виходить одними стилями адаптувати сайт під невелику ширину екрану. Тому доводиться міняти не тільки стилі, але і структуру сторінки. І в цій статті я покажу, як зробити адаптивну верстку через jQuery.

Розберемо досить класичну задачу. Є трёхколоночний сайт. І нам необхідно його адаптувати під ширину, наприклад, 480px. Звичайними стилями тут ніяк не обійтися, тому необхідно змінювати структуру. Найпростіший спосіб - це просто весь вміст правої колонки поставити вниз лівої. Тобто фактично, перетворити трёхколоночний сайт в двоколонковому.

Це теж приклад адаптивної верстки, але вже через jQuery. Давайте з Вами це реалізуємо (не забудьте підключити бібліотеку jQuery):

Я думаю, що тут код досить прозорий. безумовно, без медіа-запитів в CSS тут не обійтися. Зокрема, у центральній колонки спочатку є margin-left і margin-right. І оскільки тепер правої колонки немає, то margin-right треба обнулити, і, тим самим, центральна частина збільшиться, і вмістити контент на невеликих екранах стане значно простіше.

Таким чином, Ви тепер знаєте всю необхідну теорію по адаптивної верстці через jQuery. А в більшості випадків використовуються і jQuery, і медіа-запити в CSS, тому і те, і інше треба обов`язково знати.