CSS: 2 колонки текста
| С массовым приходом на рынок широкоформатных мониторов с большими диагоналями и разрешениями (от 1600 пикселей) резиновая верстка сайтов от случая к случаю становиться все менее привлекательной. Главная тому причина — строка обычного текста, становящаяся в разрешениях 1680х1050 или 1920х1200 невероятным испытанием на выносливость глаз. Одним из решений этой проблемы является отказ от полностью резиновой верстки. Иначе говоря, сайт является резиновым, например, до 1300 пикселей, а после остается в центре экрана с фиксированной широной. Примером такого сайта является этот. Реализовать подобный подход можно, используя свойство max-width, однако если верстка должна быть резиновой для всех разрешений, это, конечно, не выход. Одним из решений проблемы с представлением текста на больших диагоналях является разбиение текста на 2 (3, 4,..) колонки по аналогии с журналами и газетами. Разбить текст на две колонки с помощью CSS достаточно просто: Однако у такого подхода есть один недостаток. Что если разрешение экрана у пользователя 1280 пикселей? А если 1440? Или 1920? Вне зависимости от этой величины, текст будет разбиваться на колонки, что для одних будет благом, а для других абсолютным злом. К тому же сам размер колонок (в примере 500 пикселей) для разрешения 1920 пикселей приемлим, а вот для 1440 может быть уже не очень. Решение подобной проблемы — создание JavaScript-функции определяющей размер экрана и в зависимости от него выстраивающей колонки нужного размера. Подробнее об этом в статье про размер колонок текста в зависимости от разрешения экрана. |