Javascript: размер колонок текста в зависимости от разрешения экрана

Проблема представления текста на больших мониторах была поднята в статье про 2 колонки текста с помощью css. В этом материале поговорим о том, как сделать разбиение текста на 2 колонки автоматически в зависимости от разрешения экрана пользователя.

Вводная. Имеется 3 экрана. Первый — 1280х1024, второй — 1680х1050 и третий — 1920х1200. На странице сайта есть текст, который у первого пользователя должен представляться как есть, у второго — разбиваться на 2 колонки по 500 пикселей, а у третьего — тоже на 2 колонки, но по 600 пикселей.

Для начала сделаем CSS-класс columns:
.columns
{
   width: auto;
   float: left;
}

Текст, который должен быть размещен на странице делим на 2 равных части, каждую из которых оборачиваем в div с классом columns: 
<div class="columns">
Первая часть текста
</div>
<div class="columns">
Вторая часть текста
</div>

Теперь напишем нехитрую функцию JavaScript, точнее две функции: 
function CorrectColumns() {
    if (document.body.clientWidth > 1655 && document.body.clientWidth < 1681) {
        ChangeCssProperty('.columns', 'width', '500px');
    }
    else if (document.body.clientWidth > 1899 && document.body.clientWidth < 1921) {
        ChangeCssProperty('.columns', 'width', '600px');
    }
    else {
        ChangeCssProperty('.columns', 'width', 'auto');
    }
}

//Вспомогательный метод для смены параметров CSS-класса с помощью JavaScript
function ChangeCssProperty(myclass, element, value) {
    var CSSRules
    if (document.all) {
        CSSRules = 'rules';
    }
    else if (document.getElementById) {
        CSSRules = 'cssRules';
    }
    for (var i = 0; i < document.styleSheets[0][CSSRules].length; i++) {
        if (document.styleSheets[0][CSSRules][i].selectorText == myclass) {
            document.styleSheets[0][CSSRules][i].style[element] = value;
        }
    }
}

Вызов CorrectColumns уместно производить в двух случаях — после загрузки страницы и при изменении размера браузера пользователем, для корректировки параметров.

Функция ChangeCssProperty меняет нужный параметр нужного CSS-класса. А вот функция CorrectColumns непосредственно определяет, нужны ли столбцы, и если да, то какого размера. О ней немного подробнее.

Приведенный метод разбивает текст на 2 колонки, только если браузер развернут у пользователя на всю (или почти на всю) страницу — проверяется это приведенными в примере числами. Важно учитывать, что разные браузеры интерпритируют, например, разрешение 1650 и как 1650, и как 1649, и даже как 1639. Выделяется, как обычно Internet Explorer. Любопытный читатель может проверить это самостоятельно.

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

Статьи на схожую тематику:

Javascript: поразрядное форматирование чисел
CSS + JavaScript: изменение стиля
Javascript: автозаполнение текстовых полей
.NET и не только: любите www.codeproject.com
ASP.NET: JavaScript postback