Размещение рекламных блоков в зависимости от разрешения экрана. Адаптивный и мобильный дизайн с CSS3 Media Queries

В 2006 году большинство пользователей имело экран монитора 800*600. Но время неумолимо и в какой-то момент "нормальным" стал 1024*768. У веб-ресурсов, ориентированных на меньшее разрешение, появилось пустое пространство по бокам. Всё большую популярность стали приобретать , которые создаются путём использования

@Media,

относительных величин.

Благодаря им теперь не нужно искать оптимальную ширину сайта. @Media CSS

Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т.п.) применяется @Media. Из всего многообразия types и Queries , как правило, внедряют и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера .

Попробуйте это сделать прямо сейчас. И вы увидите как боковая панель данного блога распадается (поиск перемещается вниз, содержание переходит в тело статьи), в меню сокращаются списки, убирается надпись "Дата обновления" и т.д.

Макет с изначальными значениями блоков указан . Добавим правила перед тегом

@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */ .content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */ } @media (max-width: 930px) and (min-width: 470px) { /* для разрешения экрана от 470 до 930 пикселей */ aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */ } @media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */ body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */ aside {display: none;} /* боковая колонка исчезает */ } Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media="(min-width: 100em)".

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

Размещение экрана как "пейзаж" (ширина больше высоты) и "портрет" (ширина меньше высоты) @media all and (orientation:landscape) { /* стили для пейзажа */ } @media all and (orientation:portrait) { /* стили для портрета */ } или

• Перевод

Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries.

Для начала посмотрим это в действии. Пред началом посмотрите на финальное демо , что бы увидеть, как хорошо это выглядит. Изменяйте размер браузера, что бы увидеть как структура автоматически изменяется основываясь на ширине окна.Другие примеры Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress , которые я сделал используя media queries: iTheme2 , Funki , Minblr и Wumblr .Обзор Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Для проверки ширины используются media queries, если ширина меньше чем 980px, в этом случае макет становится резиновым, вместо фиксированной ширины. Если ширина меньше 650px, то контейнеры с контентом и боковой панелью расширяются на полный экран и становятся в одну колонку.

HTML Не будем останавливаться на подробном описании HTML. Ниже описана основная структура макета. У меня есть «pagewrap», который включает в себя «header», «content», «sidebar» и «footer».



Demo
Site Description



Home








blog post



class = "widget" >
widget



footer

HTML5.js Обратите внимание, что в демо используется HTML5. Internet Explorer ниже 9-й версии не поддерживает новые элементы содержащиеся в HTML5, такие как , , , и прочие. Поэтому подключаем Javascript файл html5.js в HTML документ, который позволит IE понимать новые элементы.


CSSСбрасываем HTML5 элементы в block Следующий CSS сделает HTML5 элементы (article, aside, figure, header, footer, etc.) блочными.
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display : block ;
} Описываем основную структуру в CSS Я снова не буду вдаваться в подробности. Основной контейнер «pagewrap» имеет ширину 980px. «Header» имеет фиксированную высоту 160px. Контейнер «content» шириной 600px и прижат влево. «Sidebar» шириной 280px и прижат вправо.
#pagewrap {
width : 980px ;
margin : 0 auto ;
}
#header {
height : 160px ;
}
#content {
width : 600px ;
float : left ;
}
#sidebar {
width : 280px ;
float : right ;
}
#footer {
clear : both ;
} Шаг 1 На первом шаге в демо не реализованы media queries, поэтому при изменении размера окна браузера, макет будет оставаться фиксированной ширины.CSS3 Media Queries Теперь начинается самое интересное – media queries .Подключаем Media Queries Javascript Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Вы можете включить ее, добавив Javascript файл css3-mediaqueries.js .


Подключаем CSS media queries Создаем новый CSS файл для media queries. Посмотрите мою прошлую статью, что бы увидеть как работают media queries .
Размер экрана меньше 980px (резиновый макет) Для размера экрана меньше 980px применим следующие правила:

• pagewrap = ширина 95%;
• content = ширина 60%;
• sidebar = ширина 30%.

Совет: используйте проценты (%), чтобы сделать блоки резиновыми.
@media screen and (max-width: 980px) {
#pagewrap {
width : 95 % ;
}
#content {
width : 60 % ;
padding : 3 % 4 % ;
}
#sidebar {
width : 30 % ;
}
#sidebar .widget {
padding : 8 % 7 % ;
margin-bottom : 10px ;
}
}
Размер экрана меньше 650px (одноколоночный макет) Затем, задаем CSS правила для размера экрана меньше 650px.

• header = сбрасываем высоту в auto;
• searchform = позиционируем - 5px сверху;
• main-nav = сбрасываем позиционирование в static;
• site-logo = сбрасываем позиционирование в static;
• site-description = сбрасываем позиционирование в static;
• content = устанавливаем ширину auto (это растянет контейнер на всю ширину)
• sidebar = устанавливаем ширину 100% и убираем float.

@media screen and (max-width: 650px) {
#header {
height : auto ;
}
#searchform {
position : absolute ;
top : 5px ;
right : 0 ;
}
#main-nav {
position : static ;
}
#site-logo {
margin : 15px 100px 5px 0 ;
position : static ;
}
#site-description {
margin : 0 0 15px ;
position : static ;
}
#content {
width : auto ;
float : none ;
margin : 20px 0 ;
}
#sidebar {
width : 100 % ;
float : none ;
margin : 0 ;
}
} Размер экрана меньше 480px Этот CSS будет применяться для размеря экрана меньше 480px, которая соответствует ширине iPhone в альбомной ориентации.

• html = отключаем регулировку размера шрифта. По умолчанию iPhone увеличивает размер шрифта, для более комфортного чтения. Вы можете это отключить добавив -webkit-text-size-adjust: none;
• main-nav = сбрасываем размер шрифта до 90%.

@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none ;
}
#main-nav a {
font-size : 90 % ;
padding : 10px 8px ;
}
} Эластичные изображения Для того, чтобы сделать изображения эластичными, просто добавьте max-width:100% и height:auto . Изображения max-width:100% и height:auto работает в IE7, но не работает в IE8 (да, еще один странный баг). Для исправления нужно добавить width:auto\9 для IE8.
img {
max-width : 100 % ;
height : auto ;
width : auto \9 ; /* ie8 */
} Эластичные встраиваемые видео Для видео применяем те же правила, как для изображений. По непонятным причинам max-width:100% (для видео) не работает в Safari. Нужно использовать width: 100% .
.video embed ,
.video object,
.video iframe {
width : 100 % ;
height : auto ;
} Initial Scale Meta Tag (iPhone) По умолчанию iPhone Safari сжимает станицы, что бы вместить в экран. Следующий мета-тег говорит iPhone Safari использовать ширину устройства как ширину окна и отключить.
Финальное Демо Откроем финальное демо и поизменяем размер экрана, что бы увидеть media queries в действии. Не забудьте проверить в iPhone, iPad, Blackberry (последние версии) и Android телефонах, что бы увидеть мобильную версию.

Некоторое время думал, к чему это все отнести... По идее, CSS чистой воды, я думаю. :)) Веб-дизайн штука такая, все перемешанно.

Про такой способ изменения стилей я упоминал уже много раз, пора и "выложить" описание в сеть, может, кому и сгодится. :)) Перспективы, сами по себе, радужные, только почему никто из веб-дизайнеров подобное не применяет? Всем таблицам, почти всем тэгам можно задать описание стилей во внешнем файле CSS, при разном разрешении экрана картина будет разная — экран меняет размер, таблицы остаются те-же. Классика веб-дизайна — "резиновые таблицы". Тоже выход, ну а если задумка не позволяет? Заменяя таблицы стилей целиком мы можем полностью менять внешний вид страницы — при большом разрешении экрана "раздвигать" таблицы, увеличивать размер шрифтов, изменять даже цвета — все, что с точки зрения веб-дизайнера имеет смысл изменить. Конечно, менять размеры картинок таким способом не обязательно, но можно попробовать пропорционально уменьшать их размер при меньших разрешениях экрана. Сам не пробовал применять такой финт на практике, но попробовать стоит. Сам код привожу ниже.

var height=0;var width=0;
if (self.screen) {
// for NN4 and IE4
width = screen.width
height = screen.height
}

if (width1023 && height>767)
{
document.writeln("")
}

else
{
document.writeln("")
}
}

Вот и все что нужно. Почти. :))) В зависимости от разрешения экрана выводится одна из трех строк с вызовом описания стилей. Стили, понятное дело, личное дело каждого.

Надо сразу предупредить вас, я не специалист по JavaScript, так что, если есть возможность как-то улучшить эту конструкцию — пишите. Кроме того, возник один вопрос, который я пока не смог решить — все прекрасно работает в Эксплорерах и Нетскейпах выше 4.05 серии. Нетскейп серии 4.05 просто не реагирует на скрипт. У меня стоит NN4.05проф, обычно при ошибках он выводит предупреждение, в данном случае он просто не читает стили. С чем это связанно, не знаю. Если на это описание "напорется" программист, большая просьба — посмотреть и посоветовать(если не лень будет письмо писать:), что можно сделать. В идеале, подобный скрипт должен предусматривать нечто для броузеров с отключенной поддержкой JavaScript, может и еще что потребуется подключить. Пока есть только это.

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

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

Дополнение — как установленно опытным путем, Нетскейпы4.05 очень странно понимают стили, вынесенные во внешний файл. Именно по этому мы и имели подобный глюк. Как догадываетесь, подобными "машинками" и так мало кто пользовался... Надо их просто игнорировать...

Изменения в зависимости от разрешения экрана

Похоже, эта тема становится любимой. :)) Хотя тема действительно актуальная, очень часто web дизайнеру приходиться придумывать "универсальные" странички под все возможные разрешения экранов. Как решать эту проблему- личное дело каждого. Можно использовать таблицы, можно все просто сделать одного фиксированного размера, можно использовать скрипты. У использования JavaScript есть только два серьезных минуса, на мой взгляд, первый- отключенная поддержка в броузере посетителя, второй- недостаток знаний и опыта у web дизайнера. Очень часто встречается и то, и это. :))) Гениев нет, так сказать...

Изменение фонового рисунка в зависимости от разрешения экрана.
Тема, конечно, интересная. Но фоновый рисунок под максимальное разрешение может оказаться уж очень огромного размера, стоит поискать другой выход, если возможно. Но в некоторых случаях у web дизайнера просто не остается другого выхода. Привожу два варианта скрипта, сам не пробовал, но, на первый взгляд, должно все работать.

Вариант второй

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

Всем этим можно воспользоваться, но лучше попробовать обойтись простыми таблицами и компоновкой графики. Не всегда имеет смысл "наворачивать" все возможные эффекты и удобства... Самая универсальная страничка- просто таблицы, графические файлы в GIF или JPG, без скриптов, эффектов и прочего. Возможно, возникнет некоторое неудобство при просмотре на совсем маленьком или, наоборот, большом экране, но все броузеры поддерживающие графику отобразят все в приемлемом виде и без потери информации. А web дизайнеру и тут работы много будет, одна графика чего стоит...