Адаптивный 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: 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.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.