ItCafe.ru

Адаптивная верстка. Адаптивный дизайн. Умные колонки. Уголки

    

WIDTH:

главная контакты макеты webdesign@itcafe.ru

Адаптивная верстка, адаптивный дизайн

Вы находитесь на странице с адаптивной версткой, с адаптивным дизайном. Страница выглядит одинаково хорошо при любых разумных ширинах (240—1800 пикселей). В верхнем левом углу печатается ширина страницы. Поменяйте ширину экрана и Вы увидите, что дизайн страницы не ломается. То есть дизайн адаптирован к разным разрешениям. Можно сказать, что сайты с адаптивной версткой, адаптивным дизайном увидят одинаково хорошо и на ноутбуках и на маленьких компьютерах.

Умные колонки или justify-колонки

Страница состоит из двух колонок. Интерес представляет вторая колонка, она имеет адаптивную верстку. Блоки адаптируются под ширину окна. Блоки плавают и, несмотря на размер страницы, блоки всегда занимают всю ширину второй колонки. Я бы назвала эти блоки justify-блоками. Для тех, кто не знает этого слова, justify – css-свойство текста, которое обеспечивает выравнивание текста сразу по левоой и по правой границам блока.

К странице подключена библиотека jQuery, позволяющая решить задачу блоки должны занимать всю ширину блока, в котором они плавают. Функции которой вычисляют ширину плавающего блока при открытии окна и пересчитывают ширину плавающего блока при изменении ширины окна.

Обратите внимание, что ширина плавающего блока задана дважды, один раз в стиле ( ul.column li ) другой раз в скрипте, расположенном в конце страницы. Вот этот скрипт:


function smartColumns() { //функция, подсчитывающая ширину колонок
   $("ul.column").css({ 'width' : "100%"});
   var colWrap = $("ul.column").width(); 
   var colNum = Math.floor(colWrap /277); 
   var colFixed = Math.floor(colWrap / colNum); 
   $("ul.column").css({ 'width' : colWrap});
   $("ul.column li").css({ 'width' : colFixed}); //ставим точную ширину измененным столбцам
}

 smartColumns(); //после загрузки страницы

 $(window).resize(function () { //после каждого изменения размера экрана
   smartColumns();
});



Из опыта, некоторые бары-надстройки для интернет-эксплорера могут конфликтовать с библиотекой jQuery, т.к. жестко фиксируют минимальную ширину страницы, возможно заботясь, чтобы их кнопки и поисковые окошки были видны. У меня такой минимально возможной шириной экрана в IE стало 950px. Не анализируя, какой из баров виновен, удалите все бары, если хотите протестировать как в IE плавающие блоки встанут в колонку по одному.

Скругление углов без использования картинок, кроссбраузерное решение

На этой странице не используются картинки для скругления углов. Рисунки в плавающих блоках прямоугольные и положены в background. В стилевом блоке этой странцы используется стиль для скругленмя углов.
Пока все браузеры не научились понимать CSS3, придется задавать стили для каждого типа браузера. Хорошо, что браузеры реагируют только на знакомые им стилевые правила. Это позволяет нам записывать подряд все правила, которые мы знаем.
Пример стиля для скругления углов:

.extab{
background:#cacffb;
border:1px #e8e8e8 solid; 
-moz-border-radius: 10px;     /* для FF */
-webkit-border-radius: 10px;  /* для Safary и Chrome */
-khtml-border-radius: 10px;   /* для Linux  нужно проверить*/
border-radius:10px;           /* для всех враузеров, поддерживающих CSS3,  IE9 уже поддерживает */
behavior: url(images/border-radius.htc);  /* только для IE6-IE8 */
}

Если Вам не нужно скругление углов блоков с каринками, то стили про radius можно удалить.

Разумеется, можно не использовать подобные правила скругления углов, а воспользоваться картинками со скругленными углами. Это надежнее, хотя и хлопотнее.

При разработке стиля для этой страницы использовано:
  1. Для задачи блоки должны занимать всю ширину блока, в котором они плавают – публикация блога dimox.name. Ссылка на полный чистый пример находится в комментариях.
  2. Для решения задачи скругления углов блоков с картинками – скачайте архив border-radius-demo.zip, автор проекта, Remiz Rahnas.