CSS

24.09.2013 / 9 комментариев

Экраны с высокими разрешениями сейчас есть у заметной доли пользователей интернета: 1920x1080 — около 7%. При этом физически диагональ не всегда большая, окно браузера же часто развернуто на весь экран. В этом случае шрифт на многих сайтах очень мелкий, читать практически невозможно.

Читать дальше →

29.09.2011 / 3 комментария

Расскажу про использование CSS multi-column layout module. Допустим у нас есть многоуровневый список.

Для основного содержимого страницы он узковат, и возникает желание выводить его в несколько колонок. Для этого используем CSS-свойства column-count: 4 и column-gap: 10px. Первое задает на сколько колонок разбить контент, второе — какой между ними зазор.

Читать дальше →

23.08.2011

Наверное многим знакома ситуация, когда проектируя макет сайта, приходится излишне ограничивать ширину изображений в основной колонке из-за пользователей с рарешением экрана 1024x768 (сейчас их доля 17%). Особенно это ощутимо в трехколоночных макетах.

На dirty.ru ширина картинок ограничена 500 пикселями

Если ширина изображения больше, то обычно оно либо частично заслоняется правой колонкой, либо появляется горизонтальная прокрутка, либо боковая колонка сползает вниз.

Сейчас удачным решением мне кажется загрузка изображений с шириной, удовлетворяющей разрешению 1280x1024. А для меньших разрешений пусть картинки масштабирует браузер:

img {max-width: 100%; height: auto}

Max-width: 100% сжимает изображения, основываясь на ширине оборачивающего блока. Но если эта ширина больше ширины изображения, то масштаб не меняется. Height: auto сохраняет пропорции изображений. Вообще это значение по умолчанию, но иногда у картинок жестко указаны размеры, и тогда пропорции искажаются.

Пример есть здесь. Чтобы увидеть эффект, изменяйте ширину окна.

16 комментариев