Адаптивный CSS своими руками
При разработке одного проекта, передо мной встала задача реализовать адаптивную верстку. HTML-страница должна была по-разному смотреться на экранах различных размеров. При этом, она должна была быть легковесной, поэтому использовать тяжеловесные css-фреймворки не хотелось. Таким образом, родился собственный велосипед, которым хочу поделиться с хабрасообществом. Возможно подобные решения уже есть, но мне о них не известно.
Суть подхода заключается в следующем. Сначала, в HTML помечаются блоки, которые должны изменяться в зависимости от размера страницы. Делается это добавлением дополнительного класса «scr». Затем, в CSS, определяем отображение этих блоков под разные размеры. Это можно вынести в отдельный CSS-файл.Все что нам нужно для реализации, это несколько строк JS-кода и библиотека jQuery (в моем случае я использовал JQLite — урезанную версию jQuery).
Итак, наш JS-скрипт:
function viewport () { var e = window, a = 'inner'; if (!('innerWidth' in window)) { a = 'client'; e = document.documentElement || document.body; } return { width: e[ a+'Width' ], height: e[ a+'Height' ] } } function responsiveCss () { var wd = viewport ().width; var cl = «scr-md»; if (wd < 768) { cl = "scr-xs"; // mobile } else if (wd >= 768 && wd < 992) { cl = "scr-sm"; // tablet } else if (wd >= 1200) { cl = «scr-lg»; } $(».scr»).each (function (){ $(this).removeClass («scr-xs scr-sm scr-md scr-lg»); $(this).addClass (cl); }); } $(document).ready (function () { responsiveCss (); window.onresize = function () { responsiveCss (); }; }); Что делает скрипт. Определяет текущий размер страницы и, при загрузке, или при изменении размера, ко всем элементам, помеченным классом «scr», добавляет дополнительный класс «scr-XX». Где XX — различный, в зависимости от размера страницы и может быть:
scr-xs — мобильные устройства (<768px) scr-sm — планшеты (≥768px) scr-md — обычные экраны (≥992px) scr-lg — большие экраны (≥1200px) Как видите, размеры были взяты из CSS-фреймворка Bootstrap.
Теперь, чтобы определить поведение элементов под разные размеры, нужно описать их в CSS. Причем, описывать можно только то, что будет изменяться, остальное унаследуется от изначального определения элемента. А изменять блоки можно как угодно, в том числе скрывать (display: none).
Например:
.my_block { font-size: 14 px; width: 80%; color: red; }
.my_block.scr-sm { font-size: 12 px; width: 100%; }
.my_block.scr-xs { display: none; } Здесь мы изменяем элемент с классом «my_block». На планшетах будет изменен размер шрифта и ширина. А для мобильных устройств он вообще будет скрыт.Более развернутый пример на jsFiddle.
Плюсы данного подхода:
Во-первых, простота. Не нужно устанавливать дополнительные библиотеки и фреймворки. Требуется лишь минимальное изменение HTML. Во-вторых, универсальность. Старый сайт легко можно сделать адаптивным, не ломая обратной совместимости. В-третьих, этот способ более семантически правильный, чем, например, тот же Bootstrap. Отображение блоков описывается в CSS, а не в HTML.
