О профессиональном и не только - Александр Михайленко IAMLAB Голосов: 0 Адрес блога: http://iamlab.blogspot.com/ Добавлен: 2014-02-25 00:53:44

Начинающим о responsive и @media

2013-03-31 22:19:00 (читать в оригинале)



Привет друзья! Сегодня технический мини "туториал" для начинающих веб-разработчиков.
И снова bootstrap нам куда? Правильно! В помощь! ) но не о нем пойдет речь в этой статье.

Если конкретнее, то совместим несколько полезных техник - теги и разметка HTML5, используем прелести css3 и responsive дизайна, столь актуального в наше время, и конечно же медиа типы.

Для начала вам достаточно создать страницу следующего содержания и приложить рядом с ней фреймворк - Bootstrap


Небольшое теоретическое отступление пока мы плавно переходим к таблице стилей.
Стили могут относиться к различным типам медиа. Например, можно создать отдельный стиль для страницы, которая будет просматриваться в браузере, и другой стиль для печати страницы.
Аналогичным образом мы будем определять тип медиа-устройства по размеру экрана (@media (min-width: 960px) and (max-width: 1199px) ) и переопределять специфичные css свойства для нужного блока или любого объекта на нашей странице.



А теперь перейдем к перечню стилей описанных в - style.css:

#info{
width: 830px;
font-family: Tahoma;
font-size: 26px;
margin:0px auto; /* - помним о центрировании блока  */
text-align:center;
}
#foot{
width: 480px;
text-align:center;
margin:0px auto;
}
#logo{
margin:0px auto;
}
@media (min-width: 1200px) { 
#logo{
width: 545px;
}
#foot{
width: 480px;
}
}
@media (min-width: 960px) and (max-width: 1199px) { 
#logo{
width: 545px;
}
#book{
width: 960px;
}
#foot{
width: 480px;
}
}
@media (min-width: 768px) and (max-width: 959px) { 
#logo{
width: 445px;
}
#foot{
width: 480px;
}
}

@media (min-width: 541px) and (max-width: 767px) { 
#logo{
width: 345px;
}
#foot{
width: 480px;
}
 }
 @media (min-width: 400px) and (max-width: 540px) { 
#logo{
width: 345px;
}
#foot{
width: 400px;
}
}
@media (min-width: 241px) and (max-width: 399px) { 
#logo{
width: 200px;
}
#foot{
width: 241px;
}
}
@media (min-width: 0px) and (max-width: 240px) { 
#logo{
width: 140px;
}

#foot{
width: 170px;
}
}

Видно что при изменении максимального и минимального размера для каждого конкретного типа медиа, я меняю ширину блока - тем самым заставляю картинку, расположенную в нем, изменять свои размеры. И тем самым пользователь будет счастлив видеть свой любимый сайт который подстраивается под любое устройство веб-серфинга.
Конечно же вас никто не ограничивает в описании стилей для конкретного типа устройства - еще раз повторюсь - используйте все средства для того чтобы ваш сайт был максимально дружелюбным для любого пользователя с любым устройством. Применяйте все от смены шрифтов для удобного чтения до плавающих блоков и тд.
Конечно можно уменьшить количество видов "медиа", кому то будет достаточно трех форматов - настольный, планшет, телефон, кто-то пойдет дальше и максимально проработает все граничные варианты размеров современных устройств.

Максимально протестировать и проверить качество своей работы можно на - quirktools.com

Всем удачи! С вами ваш, Александр М.