При разработке одного проекта, передо мной встала задача реализовать адаптивную верстку. 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: 14px;     width: 80%;     color: red; }  .my_block.scr-sm {     font-size: 12px;     width: 100%; }  .my_block.scr-xs {     display: none; } 

Здесь мы изменяем элемент с классом "my_block". На планшетах будет изменен размер шрифта и ширина. А для мобильных устройств он вообще будет скрыт.

Более развернутый пример на jsFiddle.

Плюсы данного подхода:

• Во-первых, простота. Не нужно устанавливать дополнительные библиотеки и фреймворки. Требуется лишь минимальное изменение HTML.
• Во-вторых, универсальность. Старый сайт легко можно сделать адаптивным, не ломая обратной совместимости.
• В-третьих, этот способ более семантически правильный, чем, например, тот же Bootstrap. Отображение блоков описывается в CSS, а не в HTML.