Css3 — Адаптивная версия дизайна сайта


Содержание

Пошаговое руководство по созданию адаптивного дизайна

Здравствуйте! Мир не стоит на месте, а вместе с ним не должны отставать и мы. Процент посетителей с портативных устройств растет в геометрической прогрессии, в связи с этой тенденцией и будет написана эта статья.

Вступление

До этого дня многие посетители жаловались как в комментариях, так и мне лично на то, что данный блог попросту не влезает в их узкие экраны (появляется горизонтальная прокрутка, а фон справа не прогружается). Я знал об этом недостатке, но люблю экономить время на подобных вещах: свои сайты я верстаю для IE9 и выше, не создаю мобильных версий и тд. (экономия личного времени и кода). Однако я и сам часто использую смартфон в качестве настольной книги по своей профессии: читаю стоя в общественном транспорте, на диване (ноутбука у меня нет) и тд. В общем, я постепенно пришёл к выводу, что такую важную деталь, как удобство чтения на различных устройствах больше нельзя игнорировать ни на одном из сайтов.

Просчитать все устройства, с которых могут зайти на ваш сайт в современном мире практически невозможно, ведь уже есть даже бортовые компьютеры с выходом в Интернет.

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

Чтобы нам не приходилось классифицировать устройства на типы и создавать отдельный сайт для смартфонов (m.site-on.net, mobile.site-on.net или site-on.net/mobile/), отдельный сайт для планшетов, отдельный сайт для мультиварки с выходом в Интернет и тд. — был придуман адаптивный дизайн (синонимы: адаптивная вёрстка, макет).

Смысл адаптивного макета в том, что сайт динамически (в режиме реального времени) подстраивается под размер вашего устройства, и если размер дисплея вдруг расширится / сузится (как при ресайзе браузера или смене ориентации планшета), то и сайт на это отреагирует незамедлительно, без перезагрузок и задержек.

В итоге мы получаем одну единственную версию сайта (site-on.net), которая великолепно отображается на любых устройствах и экранах, учитывая их особенности.

На создание адаптивного макета этого блога (из фиксированного) у меня ушла вся прошлая суббота: с 9:00 утра до полуночи с перерывами на отдых.

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

Теперь у всех посетителей этого блога появилась возможность удобного чтения статей с любого устройства: начиная с магнитолы в вашем авто и заканчивая телевизором на вашей стене.

Ради идеи пришлось даже распрощаться с рекламной строкой nolix, так как она была не уместна при маленьких разрешениях экранов, а убрать ее специально для них было бы обманом рекламодателей, ведь показы, скорее всего, все равно бы накручивались.

Когда я начинал интересоваться адаптивной вёрсткой, я не смог найти хорошей инструкции к действию в Сети. По какой-то причине все статьи на эту тему не внушали мне доверия, поэтому единственным выходом для меня было прочесть всё из первоисточника – из книги Итана Маркотта «Отзывчивый веб-дизайн», оригинал книги находится по адресу: http://www.abookapart.com/products/responsive-web-design

Кстати, прочитав русскоязычный вариант книги, для себя я сделал вывод, что «адаптивный» и «отзывчивый» – это не 2 разных понятия, а просто трудности перевода, несмотря на это в Сети вы найдёте много споров на данную тему.

Далее мы переходим к инструкции по созданию отзывчивого макета сайта, на примере этого блога.

Сравните вид на планшетах, как было (разрешение 1280*800):

На смартфоне, как было (разрешение 320*480):

Ещё раз подчёркиваю, что разница видна не только на портативных устройствах, но и на любых других устройствах с относительно узким разрешением дисплея. Например, у меня в зале стоит второй стационарный компьютер с трубчатым монитором и разрешением 1024 на 768 пикселей, так вот если раньше мой блог не помещался в него по ширине и смотрелся ужасно, то теперь складывается впечатление, будто блог создавали специально под этот старый монитор.

Начнём

Адаптивный дизайн состоит из трёх главных принципов:

  • Резиновый макет
  • Резиновые изображения
  • Медиазапросы

1. Гибкий макет

Для создания гибкого макета мы должны использовать только относительные единицы измерения: em для размера шрифтов и % для размеров элементов. В редком использовании px тоже нет ничего плохого, но лучше свести их использование к минимуму.

Раньше ширина этого блога была фиксированной и равнялась 1080px, вместо этого нам нужно взять какое-то более гибкое значение, например 90% окна браузера. При этом я решил, что сайт все равно не должен быть слишком широким, и поэтому сразу же ограничил его ширину до моих любимых 1080px, в итоге было:

Почему именно 90%? Просто мне так захотелось, я решил, что отступы по 5% справа и слева будут самое то. Можно было поставить 99% или 80%, всё зависит от вашей задумки.

Идём далее, у меня есть 2 колонки: основная колонка (та, где вы сейчас находитесь глазами) и правая колонка. Их ширина равнялась 780px и 280 px, но теперь мы должны пересчитать её в процентах, и вот вам формула на все случаи жизни:

target / context = result

или если говорить упрощенно и по-русски, то:

Ширину (размер шрифта) нужного элемента в px разделить на ширину (размер шрифта) родительского элемента в px = искомый результат в % (или em).

На этом можно было бы закончить рассказ о резиновом макете, так как всю суть я уже рассказал, но для лучшего усвоения я продолжу.

Итак, основная колонка в фиксированном варианте равна 780 px, её контекст (родитель) в фиксированном варианте имеет ширину 1080px, в итоге:

780 / 1080 = 0.72222222222

Так как нам нужны проценты, а не em, то результат нужно умножить на 100, в итоге получаем:

Вы, наверное, надеялись, что я округлю это число? Но нет, в книге этого категорически не рекомендуют. Поэтому смотрите по ситуации, насколько важна в вашем случае точность. В случае двух колонок такая точность совершенно не важна, поэтому я со спокойной душой решил округлять всё до 4 знаков после точки. В итоге вот мой CSS для основной колонки:

Обратите внимание, рекомендуется оставлять комментарии с расчётами, иначе вы забудете и запутаетесь что на что делить в дальнейшем. Лично я люблю оставлять в комментариях только первое число — делитель.

Проделываем тоже самое с правой колонкой:

Надеюсь, суть ясна, теперь перейдём к размерам шрифта, который рассчитывается точно также.

По умолчанию десктопные браузеры выставляют размер шрифта 16px, но нам пиксели не желательны, поэтому если вы хотите оставить это же значение нужно:

16 (нужное значение) / 16(значение по умолчанию) = 1 em

Но я считаю шрифт в 16 пикселей слишком мелким, я предпочитаю 18, поэтому:

18 / 16 = 1.125 em

Размер шрифта моего логотипа «Site on!» в фиксированном макете составляет 40px, переведём его в em:

Вы обратили внимание? Теперь мы делим не на 16px, а на 18px, так как у родителя (у тега body) моего логотипа размер 18px, в итоге CSS:

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

2. Гибкие изображения

Буду краток: если вы не указываете размеры изображений в атрибутах тега img, то добавляем в ваш CSS:

А если указываете размеры изображений в атрибутах (я указываю и вам советую):

3. Медиазапросы

Очень интересная, простая и вместе с этим чрезвычайно полезная вещь — @media. Но давайте сразу о кроссбраузерности… Хорошая новость заключается в том, что большинство современных браузеров поддерживают медиазапросы: среди них Opera 9.5+, Firefox 3.5+, браузеры на базе WebKit, такие как Safari 3+ и Chrome, а также IE 9+.

Да и с мобильными браузерами дела обстоят неплохо. Медиазапросы поддерживают такие браузеры на базе WebKit, как Mobile Safari, webOS производства HP и Android, а также Opera Mobile и Opera Mini. Что касается Windows Phone, с 2011 года на них устанавливается IE9+, который обеспечивает полную поддержку медиазапросов, что не может не радовать.

Старые версии браузеров, включая IE8 и ниже, тоже не проблема. Существуют специальные JavaScript библиотеки, призванные обеспечить 100% кроссбраузерность начиная с IE5, например, css3-mediaqueries.js или respond.js.

Кто до сих пор вовсе не знаком с медиазапросами, может поискать информацию в справочниках, или разобраться по ходу статьи, ничего сложно в них нет.

Вот основное применение медиазапросов в нашем адаптивном случае:

Это можно читать так: если размер экрана равен или меньше 1150px, то применить вложенные правила. Этот код вставляется в любое место обычного .css файла, как и любой другой CSS код.

Что происходит в примере выше? Если экран посетителя равен или меньше 1150px, то сделаем изображения гибкими и уберём фон с заданного элемента.

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

Цукерберг рекомендует:  Github - Затруднения с gitgithub

Благодаря таким медиазапросам, которые мне напоминают конструкцию if (условие) из PHP или других языков программирования, мы перестраиваем стили сайта в зависимости от размеров экрана как нам вздумается.

Вот как построены медиазапросы на данном блоге для обеспечения полной адаптивности:

То есть в медиазапросах всё индивидуально, вы вписываете туда те изменения, которые нужны для конкретного сайта при определённом размере браузера. Для наглядности вы можете менять размер вашего дектопного браузера (ресайзить) и следить за постепенным применением стилей, описанных выше. Именно так и работают медиазапросы.

Заключение

Хочу отметить, что один из современных подходов к адаптивному дизайну заключается в том, чтобы сначала разрабатывать макет под самые мелкие дисплеи (концепция «Сначала мобильные»), а только потом, по мере увеличения размеров дисплея подгружать элементы на веб-страницу (прогрессивное улучшение) с помощью JavaScript. Смысл в том, чтобы не заставлять пользователей с телефонов загружать лишние данные, которые они всё равно не увидят, замедляя тем самым загрузку страниц.

Если материалов данной статьи вам недостаточно или что-то не понятно, то рекомендую к прочтению упомянутую в начале статьи книгу Итана Маркотта, в оригинале она насчитывает всего около 170 страниц.

Спасибо всем за внимание и успехов в создании адаптивных сайтов!

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!
Вы можете помочь развитию проекта, сделав всего 1 клик:
Пожалуйста, прокомментируйте, как Вам моя статья?

Спасибо за книгу, уже скачал, почитаю.
На счет адаптивного дизайна — у Вас на сайте ошибка. Читаю в масштабе 200%.
Появилась заметка о том, что адаптивная версия сайта активирована.
Основной навигацией по сайту использую строку после кнопки старт (навожу курсор на создание сайта, далее выбираю допустим CSS чтобы перейти в раздел и выбрать публикацию для чтения) — так вот в масштабе 200% (я так понимаю что в адаптивной версии сайта) меню ведет себя не корректно — при наведении курсора появляется второй уровень, но не задерживается, невозможно успеть нажать на необходимый пункт меню.

Для улучшения навигации по сайту в плавающий блок «Подписка» было бы полезно включить меню с расширенной навигацией (возможностью выбора хотя бы необходимого раздела статей, не говоря уже о конкретной публикации). Кстати блок этот плавающий блок также пропадает в масштабе 200%, при этом текст статьи не раздвигается на все пространство. Хорошо бы чтобы либо текст раздвигался по всей ширине, либо чтобы в пустом месте был блок (навигации или подписки), чтобы пустое место не раздражало.

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

Кстати, стрелка вверх также пропадает при масштабе, хотя должна находиться (мне так кажется) всегда в любом масштабе.

Добрый день. Масштаб не влияет на отправку комментариев, так как это серверная часть сайта. Видимо, произошла какая-то непридвиденная ошибка.
Стрелочку убрал специально, в большинстве современных браузеров для портативных устройств она встроена, только место будет занимать.

Меню исправил, спасибо.

Здравствуйте.
Осилил я сегодня книгу по адаптивному дизайну. Оказывается в книге больше воды, чем сути — возможно прочитав её Вы выбрали суть и она уместилась в Вашей публикации. Это значит, что вполне достаточно прочитать эту статью и не заморачиваться прочтением книги. Хотя, основные принципы понятны что адаптивный дизайн нужная вещь, и что делать его нужно — так как это шаг в будущее. Этим я и буду заниматься, когда пойму каким образом все вместить в Virtuemart шаблон — ведь нужно начинать с мобильной версии, которой по умолчанию там нет. Сложно все это, при чем без примера ещё и разбираться придется.

Что касается самой книги — написана она грамотно, при этом пытался повторить весь код, но увы, работоспособной версии адаптивного дизайна не получилось — автор решил убрать большущую часть создания дизайна и перейти именно к рассмотрению адаптивной версии. При этом все остальные примеры уже невозможно было повторить за неимением исходника. А ведь изучение заключается именно в повторении и получении результата. Либо может я просто не достаточно внимательно читал — очень уж хотелось её сегодня осилить и не откладывать в долгий ящик.

По поводу конкретно вашего дизайна — масштаб +200%, пишу этот комментарий, и вставляю почту для подписки. Ввожу «сел» справа налево — и. кнопка отправить скрылась из вида. Убрал галку о подписке (можно было уменьшить масштаб) чтобы иметь возможность отправить комментарий. По сути, наверное нужно чуть подшаманить и с этой кнопкой.

По поводу современных браузеров — у меня хром, устройство компьютер с расширением 1680*1050. Кнопка была бы очень кстати. Для разграничения области просмотра автор указанной Вами книги рекомендует разграничивать width и device-width чтобы определить нужно ли отображать елемент или не нужно. В данном случае, если расширение экрана девайса менее 768 (например) то не показывать кнопку, если больше — показывать. Имеется ввиду именно device-width а не просто width.

Хотя, не мне по сути Вам указывать, я пока не компетентный в данных вопросах и не понимаю почему нужно или не нужно. Я как пользователь говорю что не удобно чуток.

Это говорит еще и о том, что шрифт на моем 1680*1050 выглядит достаточно маленьким, а значит можно просто подключить @media для этого расширения увеличив шрифты хотя бы на 50% — более удобно будет пользоваться Вашим сайтом.

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

Приятного дня Сергей!

Добрый день. Спасибо за комментарий.

Адаптивность сайта проверять масштабом не совсем правильно, нужно менять размеры окна браузера или разрешение монитора. Масштаб должен быть всегда 100%. Поведение при масштабировании и при ресайзе несколько отличаются.

У меня, кстати, тоже 1680*1050, отличная нестандартная пропорция :)

Шрифт на сайте крупнее других блогов, 18px, обычно все используют 16 или 14. Кстати если вы включите на Windows «Крупный шрифт», то на моём блоге шрифт тоже увеличится.

Делать адаптивный дизайн для VirtueMart, для этого блога или для любого другого сайта — никакой разницы нет. То есть отличий от этой статьи с VirtueMart никаких. Это же просто вёрстка, она не зависит от CMS.

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

Как сделать адаптивный дизайн через CSS

Наличие адаптивного дизайна необходимость – жизнь это доказала своими граблями, никакая Mobile Joomla не даёт такого эффекта, как прямая адаптация сайта. Сегодня я поведаю, как сделать адаптивный дизайн через правку стилей CSS с помощью своей головы и пальцев рук. Разложить всё по полочкам не получится, так как каждый шаблон имеет нюансы, но толчок для начала адаптации я дам.

Адаптация под десктоп

Для начала делаем адаптацию под десктоп. Это базовый этап, от него потом и начинаются танцы с бубном. Многие ошибочно воспринимают мир, думая, что с отображением сайта на обычных компьютерах у них нет проблем, так как шаблон кто-то верстал, и он ровно смотрится при обычном разрешении. При разрешении вашего монитора да, а как на большем экране, как вы смотритесь с absolute и пикселями на экране с разрешением 1920×1080? Цель адаптации дизайна – нормальное отображение сайта на мобильных и отсутствие косяков на больших экранах.

Что делаем? Главное – переводим все большие значения в css шаблона из пикселей (px) в проценты (%). Тут есть несколько правил:

  1. — Изменяем px на % только для больших значений, менять 5 px на 1% (для примера) не надо,
  2. — Все работы делайте через Файербаг, потом переносите значения в реал.

Немного для общего понимания. У вас есть сайт, на котором ширина страницы 1000 px, в ней есть три блока – центральный 800 px и два боковых сайтбара по 100 px. Значит после замены на проценты размер страницы станет 100%, центральный контейнер 80% и боковые блоки по 10%. Грубо, но понятно. Теперь чуть больше конкретики.

У меня до адаптации (сохранил для истории старый файл CSS) основной контейнер был прописан в стилях так:

После адаптации стал таким:

Топ-меню изменилось с:

А смещение блока content реализовано с:

Обратите внимание на код:

overflow: hidden !important;

Им мы убираем прокрутку по горизонтали, это пригодится для мобильной адаптации, иногда имеет смысл указывать только запрет горизонтальной прокрутки с помощью:

overflow-x: hidden !important;

Все работы ведите через Firebug или инспектор Google, проверяйте глазами – сайт должен выглядеть после перевода px в % так же. Экран пока можете не сжимать, до мобильной адаптации ещё не дошли, пока сделали базовую работу для больших экранов.

CSS под мобильные устройства

Базу создали, кстати, это самый сложный этап, теперь надо добиться, чтобы сайт корректно отображался во всех мобильных устройствах. Предыдущих манипуляций мало, так как под маленький экран все сжать в процентах не получится. Согласитесь, разглядеть на смартфоне при разрешении 320 px по ширине сайтбар в 10% невозможно.

Нам понадобится использовать @media screen and, которые вносят изменения в стили для устройств с конкретным разрешением. Я вначале определил с помощью уменьшения экрана браузера, на каком разрешении у меня начинаются проблемы с отображением. Сужая экран, я нашёл свою точку «кривизны», она начинается при ширине 1000px, значит прописывать основные мобильные стили надо отсюда – всё, что больше будет отображаться в стилях обычного десктопа, что меньше отдельными стилями.

Пример @media screen and

Я прописал CSS под мобильные устройства на шаблоне Joomla 1.5 так:

@media screen and (max-width:500px)

@media screen and (max-width:400px)

Немного конкретики по коду.

При ширине экрана меньше 1000 px у меня перестают отображаться боковые сайтбары, шапка, пагинация и футер. Моё имхо – они в мобильной версии не нужны. Это делает код:

.page-numbers, #footer, #navigation, #header,.logo,.nav-box .

По умолчанию в мобильных Joomla 3 и выше боковые блоки уходят вниз, растягивая страницу до безобразия, так что и на новых движках можно кое-что подправить ручками.

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

Для них указано, что максимальный размер картинки по ширине 96% (с отступами красиво), а высота идёт на автомате.

Конкретика закончилась, ещё раз по общему смыслу адаптации сайта (дизайна) через CSS.

  1. — Изменяем большие значения px на %,
  2. — Прописываем отдельно @media screen and для мобильных устройств.

Через @media screen and обязательно закрывайте ненужные для мобильного блоки для вывода, но переводите в % те значения, которые некорректно отображаются, так как их оставили в пикселях в десктопной версии CSS.

Как результат – удобство для пользователя при работе с Joomla Mobile было 65-70%, при адаптивном дизайне на CSS, стало 99%. Выводы на лице – проверка Яндекса и Goole на адаптивность не проходилась, сейчас проходит на ура.

5 трюков CSS для адаптивных шаблонов

Сделать адаптивный шаблон сайта достаточно просто, но поддерживать элементы в сбалансированном виде во всех точках изменения шаблона — вот что является настоящим искусством. В данном уроке представлены 5 методов для использования в CSS для адаптивного шаблона. Есть очень простые свойства CSS, такие как min-width , max-width , overflow и относительные значения, но они все играют важную роль в разработке адаптивных дизайнов.

1. Адаптивное видео

Данный трюк CSS позволяет встраиваемому видео растягиваться до установленных границ.

2. Минимальная и максимальная ширина

Свойство max-width позволяет устанавливать максимальную ширину элемента. Его надо использовать, чтобы предотвратить расширение элемента за определенные рамки.

Контейнер со свойством max-width

В ниже приведенном примере определяется размер контейнера 800px, но устанавливается ограничение по размеру границу 90%.

Адаптивное изображение

Можно сделать изображение с автоматически изменяющимся размером до максимальной величины с помощью свойств max-width:100% и height:auto .

Выше приведенный код для адаптивного изображения работает в IE7 и IE9, но не действует в IE8. Для исправления ситуации нужно добавить свойство width:auto . Можно использовать условное правило CSS специально для IE8 или ниже приведенный трюк для IE:

Свойство min-width

Свойство min-width противоположно по действию свойству max-width . Оно устанавливает минимально возможную ширину элемента. Ниже приведен пример использования свойства min-width, чтобы поле ввода не становилось слишком маленьким при уменьшении масштаба.

3. Относительные значения

В адаптивном шаблоне использование относительных величин может существенно упростить код CSS и улучшить внешний вид дизайна.

Относительные поля

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

Относительный размер шрифта

С помощью относительных величин для размера шрифта (em или %) можно достаточно просто добиваться соответствующего изменения высоты строк и размеров отступов при адаптации шаблона под размер экрана устройства. Например, размеры всех связанных элементов автоматически изменяются при установке новых размеров размера шрифта для родительского элемента.

Относительные отступы

Нижеприведенный рисунок демонстрирует преимущества использования относительного значения в % для отступов. Блок слева имеет несбалансированное пространство при применении абсолютных величин в px. Блок справа имеет отличный вид с пропорциональным заполнением содержанием.

4. Трюк со свойством overflow:hidden

Отменить обтекание элемента текстом можно с помощью свойства overflow. Очень простой и полезный способ. Можно отменить обтекание текстом предыдущего элемента и сохранить структуру содержания.

5. Свойство word-break

Свойство max-width помогает разместить неломающийся текст (например, длинный адрес URL) в несколько строк вместо одной.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
Перевел: Сергей Фастунов
Урок создан: 19 Мая 2012
Просмотров: 100258
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Используем медиазапросы CSS3 для адаптивной вёрстки шаблона 31

Здравствуйте, уважаемые друзья и гости моего блога. В сегодняшней статье поговорим о медиазапросах CSS3 и о том, как с их помощью создаются адаптивные шаблоны сайтов.

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

В общем, медиазапросы – это хорошая альтернатива создания отдельного мобильного шаблона для сайта. О том, как важно позаботится об удобстве мобильных посетителей я писал ещё год назад, все доводы в пользу адаптивного дизайна можно прочитать здесь.

Зачем нужны медиазапросы и как они работают

Вы, конечно же, знаете, что каждый сайт состоит из HTML каркаса и CSS стилей. Всё остальное, базы данных, скрипты и прочие примочки, нужны в зависимости от сложности проекта.

HTML – каркас, это разметка сайта. То есть блоки с шапкой, подвалом, сайтбарами и контентом. Если вы представляете себе таблицу в текстовом редакторе Word, то каркас сайта – это нечто похожее на таблицу. Только вот код самого простого каркаса выглядит вот так:

Но в таком виде, на экране мониторов будет отображаться белый экран. Так как нет содержимого блоков и самого главного – CSS стилей оформления.

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

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

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

И вот тут-то приходят на помощь медиазапросы. Которые, кстати, и стали доступны с появление новой версии CSS3.

Так как же они работают? А работают они следующим образом, если вам приходилось хоть раз писать формулы в Excel или программировать, то вы знакомы с условием «если». То есть медиазапрос создаёт такие условия: «если экран браузера или устройства меньше 600px, то применяй следующие стили».

А выглядит это таким вот образом:

Это условие будет менять дизайн сайта и при изменении размера окна браузера и при просмотре сайта с мобильного устройства.

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

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

А теперь давайте разберемся, где же прописывать подключение медиазапросов.

Как подключить медиазапросы

На самом деле здесь всё очень просто. Вы можете добавить запросы в таблицу стилей вашего сайта (style.css) или создать новый файл со стилями для мобильных устройств и подключить его как отдельный файл стилей.

Для начала разберём первый вариант, — добавление медиазапросов в таблицу стилей. Запрос должен располагаться после всех основных стилей, то есть в самом низу файла style.css.

Медиазапросы в таблице стилей

Таким образом, первоначально будут выполнены основные стили, а в случае выполнения условий, применены стили, указанные в запросе.

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

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

Давайте рассмотрим процесс добавления медиазапросов этим способом.

Для начала вы создаёте отдельный файл с запросами и стилями. Сделать это можно в редакторе Notepad++. Сохраняете его как css файл.

Создание файла с медиазапросами

Далее, нужно копировать этого файла на хостинг в папку вашей темы, или в папку, где хранится файл style.css.

Копирование файла на хостинг

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

Этот код говорить о том, что эти стили будут срабатывать, если экран устройства меньше 600px.

Вот, в принципе и все хитрости с медиазапросами. Как гласит правило Парето – 20% усилий гарантирует 80% успеха. То есть знания, полученные в статье, на 80% гарантируют успешное применение на практике. Остальное дело за знаниями HTML и CSS.

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

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

Как на компьютере посмотреть вид сайта с мобильных устройств

Сегодня в современных браузерах Firefox, Chrome, Яндекс есть панель разработчика, в которой легко можно просмотреть, как выглядит сайт на мобильных устройствах.

Для этого достаточно нажать правую кнопку мышки на странице сайта и выбрать пункт «Просмотр кода элемента» для Хрома и Яндекса или «Исследовать элемент» для Файрфокса.

Просмотр адаптивной верстки в Яндекс

Просмотр адаптивной верстки в Firefox

А в панели разработчика можно просмотреть адаптивную вёрстку, нажав на кнопочки, показанные на скриншотах выше.

Также для этих целей можно воспользоваться сервисом Screenfly . Работать с ним очень просто достаточно ввести в поле адрес сайта и смотрите, как он выглядит на разных мобильных устройствах.

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

А у меня на сегодня всё, увидимся в новых статьях и видеоуроках. Желаю вам успехов!

Похожие статьи по теме:

Друзья, поддержите блог! Поделитесь статьёй в социальных сетях:

Никаких медиа-запросов! Верстка адаптивных макетов с CSS Gr > Дата публикации: 2020-03-12

От автора: CSS Grid не только изменил то, как мы понимаем и строим макеты для Интернета, но также способствовал написанию более гибкого кода, заменив «хакерские» методы, которые мы использовали ранее, а в некоторых случаях убив необходимость полагаться на код для конкретных разрешений и окон присмотра. Что самое крутое на этом этапе эпохи веб-разработки, так это то, что мы способны делать все больше и больше с меньшим количеством строк кода.

В этой статье мы начнем знакомиться с тем, как делается с помощью CSS Grid адаптивная верстка. Создадим пару общих адаптивных схем навигации. Это проще, чем вы думаете, и, поскольку CSS Grid был создан с учетом оперативности, на это потребуется меньше кода, чем на написание медиа-запросов. Давай сделаем это!

Макет № 1: Hero-контент и список статей

Мы начнем с этого набора примеров, создав общий макет веб-сайта: Hero-раздел во всю ширину с сеткой карточек ниже.
Оба элемента будут реагировать на изменение размера окна и соответственно адаптироваться. Хотя на первый взгляд это может показаться большим количеством кода, адаптивное поведение реализуется с помощью всего шести строк кода CSS Grid и без написания @media-правил вообще . Давайте разберем код, чтобы увидеть, что происходит:

Hero-раздел

Давайте посмотрим на код для элемента .hero:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

У нас есть несколько стилей фона, чтобы включить фон с изображением пива, немного отступов, чтобы отделить контент от края экрана, а затем три строки стилей сетки:

Первая строка (display: grid;) меняет поведение элемента .hero на контейнер сетки. Это означает, что элементы внутри .hero теперь являются элементами сетки.

Вторая строка (align-items: center;) будет вертикально центрировать столбцы в нашей сетке. Но эти две строки ничего не делают сами по себе, пока мы не установим столбцы сетки.

И вот тут начинается третья строка. В этом единственном свойстве происходит много всего, поэтому давайте рассмотрим ее шаг за шагом.

Функция repeat()

Вообще для определения колонок и рядов в сетке CSS мы обычно добавляем значение для каждого трека после определения свойства, например:

Это довольно скучно. Мы можем использовать функцию repeat(), чтобы сделать это менее многословным и удобным для понимания. Функция принимает два параметра:

Количество раз повторения значения.

После рефакторинга кода с repeat() мы получим те же результаты:

Да, намного чище, правда?


Функция minmax()

Теперь приведенные выше примеры явно определяют размеры треков (1fr и 300px). Это может подходить для некоторых сценариев, но для нашего примера нам нужно иметь возможность автоматически рассчитать размер трека на основе ширины области просмотра и автоматически настроить количество отображаемых столбцов. Чтобы сделать это, мы определим диапазон значений с помощью функции minmax(). Что мы будем определять? Вы, наверное, уже догадались: значения minimum и maximum, согласно которым должны изменяться размеры.

Цукерберг рекомендует:  Windows 10 - PUSH-уведомления

В приведенном выше примере мы установили для нашего свойства minmax() значение 240px для минимального размера и 1fr для максимального размера. Единицы fr, если вы никогда не слышали о них, обозначают дробные единицы.

Использование Firefox Grid Inspector для проверки изменения размера трека при изменении размера окна просмотра

Это приводит к тому, что наши треки равны 1fr, когда в окне просмотра достаточно места (оно же разрешение монитора), и 240px, когда нам не хватает места для двух столбцов (как на мобильных устройствах). Вот почему они растягиваются, когда мы расширяем окно браузера — они занимают доступное пространство и делят его поровну между существующими колонками. Теперь переходим к последнему фрагменту головоломки!

Ключевое слово auto-fit

Ключевое слово auto-fit позволяет переносить ряды и колонки, когда в окне просмотра не хватает места, чтобы соответствовать 240px без переполнения содержимого. Теперь, имея последний фрагмент кода, мы можем достичь этого результата:

Столбец автоматически переносится, когда в области просмотра недостаточно места

Список статей

Теперь, когда мы тщательно рассмотрели поведение элементов внутри элемента hero, вероятно, что первые две строки кода CSS для списка пивоваренных заводов, приведенного ниже, могут показаться вам уже знакомыми:

Вот так! Мы используем точно такой же подход: в первой строке мы определяем сетку, во второй мы измеряем треки, используя одну и ту же магическую строку, а в третьей строке мы устанавливаем промежуток для этих столбцов. Ничего нового под солнцем, и что действительно приятно в этом — наш код достаточно устойчив, чтобы регулировать количество треков и их размеры в соответствии с количеством элементов, которые есть в нашем неупорядоченном списке:

Сетка реагирует на изменение количества треков и адаптирует макет

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Вот и все, ребята! Полностью адаптивный макет сайта, используя всего шесть строк кода CSS. Неплохо, а? Обязательно проверьте исходный код и поэкспериментируйте с этим примером на CodePen.

Макет № 2: Галерея изображений на полную ширину

В следующем примере мы применим силу нашего недавно изученного сочетание repeat(), auto-fit и minmax(), чтобы создать эту адаптивную галерею изображений. Мы также будем определять размеры треков, используя grid-column и grid-row, и рассмотрим удобную комбинацию свойство: значение, grid-auto-flow: dense;, которая позволяет изменять поведение по умолчанию элементов, которые не могут поместиться в явные треки: вместо того, чтобы переносить их на новые ряды и колонки в, мы поместим их в неиспользуемые места на сетке. Давайте перейдем к кодированию!

Настройка сетки

Сетка создается с использованием знакомого нам свойства display: grid;, где столбцы определяются с помощью repeat(), auto-fit и minmax(). Мы также добавили связку строк с функцией repeat() и определили зазор для изображений, используя grid-gap. Но новый игрок здесь grid-auto-flow: dense;. Мы вернемся к этому через секунду.

Мы также создали шаблон повторения, используя псевдо-селектор nth-child(), чтобы установить разные размеры для наших треков, используя grid-column и grid-row. Обратите внимание, что мы используем ключевое слово span, чтобы выбранный элемент занимал более одного столбца или строки.

И наконец, мы позаботимся о том, чтобы наши изображения растягивались на всю область контейнера, независимо от того, используется ли 1x, 2x или 3x — с помощью object-fit: cover;. Если вы никогда не слышали об object-fit, оно работает примерно так же, как background-image, но для HTML-тегов img:

Реальная же магия происходит здесь — grid-auto-flow: dense;. Посмотрим, что произойдет, когда мы уберем это из нашего кода:

Удаление grid-auto-flow: dense; приводит к непоследовательному размещению элементов в сетке

Видите эти дыры в нашей красивой сетке? Это потому, что некоторые элементы занимают 2 или 3 ячейки, и когда в треках не хватает места, чтобы разместить их, они переносятся в новый ряд, так как это поведение по умолчанию. Изменив его с row на dense, мы указываем сетке заполнять любые пробелы, которые у нас могут быть, элементами, которые могли бы им соответствовать, независимо от порядка их расположения в DOM.

Вот почему этот метод может быть особенно полезен для таких вещей, как галереи изображений, но может не подходить для других случаев использования, когда вам может понадобиться сохранить порядок разметки. Вы можете поэкспериментировать с демо на CodePen, чтобы увидеть разницу в размещении элементов.

Макет# 3: Макет карточек в стиле Trello

Теперь перейдем к последней демо, где мы воспользуемся возможностью вкладывать сетки, чтобы воссоздать эту доску Trello. Мы создадим сетку для четырех разных столбцов, а внутри них мы создадим дочернюю сетку для карточек. Несмотря на то, что в этом примере не будут рассматриваться новые свойства или революционные методы, он поможет нам понять, насколько легко создавать сложные макеты с помощью нескольких строк кода CSS. В этой демонстрации много дополнительного кода для создания макета в стиле Trello, поэтому мы сосредоточимся исключительно на стилях сетки.

Колонки

Чтобы создать четыре колонки, мы используем display: grid; для контейнера и нашу волшебную строку grid-template-columns. Мы также определим зазор и используем align-items: flex-start;, чтобы столбцы не растягивались до нижней части экрана.

Дальше. Оригинальный Trello по умолчанию не адаптивен: если вы измените размер окна браузера, вы заметите, что в итоге у вас появится горизонтальная полоса прокрутки. Мы не будем следовать этому поведению, поскольку хотим создавать адаптивные макеты, но если вам интересно, и вы хотите эмулировать функционал Trello, то можете добиться этого, добавив еще две строки кода CSS:

Мы рассмотрели grid-auto-flow в предыдущем примере и обнаружили, что это позволяет нам контролировать работу алгоритма автоматического размещения и то, как неявные элементы должны добавляться в поток сетки. Поведение по умолчанию row означает, что любой дополнительный элемент, который не помещается в сетке, будет перенесен на новую строку. Мы изменили это в предыдущей демонстрации на dense, а теперь установим значение column: таким образом, любая новая колонка, добавленная здесь, окажется в неявной колонке и будет иметь горизонтальную прокрутку. Мы также определим ширину для этих автоматически генерируемых колонок с помощью свойства grid-auto-columns.

Изменение значения свойства grid-auto-flow заставит это демо вести себя как реальный Trello

Карточки

Для сетки карточек мы будем использовать аналогичный подход. Мы применяем для контейнера display: grid;, но не будем определять здесь какие-либо столбцы, так как они нам не нужны. И мы применим grid-template-rows: auto;, чтобы все карточки не имели одинаковую высоту — мы хотим, чтобы некоторые из них были больше, а некоторые — меньше, на основе на типа контента, добавляемого в них.

И, снова, это и все! Еще две строки, чтобы установить зазор и поля для карточек, и все готово! Все остальное в Pen — это стандартный CSS для создания внешнего вида и стиля Trello.

И что… медиа-запросы уже мертвы?

Когда-то, когда мы создавали макеты с использованием display: inline-block или плавающие, применение медиа-запросов имело смысл для изменения размера элементов по мере уменьшения области просмотра. Но теперь, учитывая невероятно мощные макеты, которые мы можем создавать с помощью нескольких строк CSS, у вас может возникнуть искушение подумать, что медиа-запросы обречены. Я категорически не согласен с этим: я считаю, что мы должны изменить то, как мы думаем о них, и использовать их по-другому.

Как сказала Рэйчел Эндрю около года назад, мы должны использовать медиа-запросы для исправления нашего макета, когда он ломается, а не для таргетинга на устройства: их так много! С появлением Media Queries Уровня 4 и 5 мы теперь можем определять не только размеры экрана, но и типы указателей. В результате мы можем углубиться в системные настройки пользователя и адаптировать наш код для тех, кто предпочитает уменьшенное движение, или использовать их для инвертирования цветов. Это означает, что медиа-запросы не умерли; с другой стороны, я бы сказал, что это захватывающее время для использования медиа-запросов, но нам нужно научиться правильно их применять. Между тем, создание надежных макетов с использованием современных технологий, таких как Flexbox или CSS Grid, сэкономит вам массу времени и избавит от головной боли.

Автор: Juan Martín García

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Руководство для новичков: простой адаптивный сайт при помощи CSS

Все говорят об адаптивном веб-дизайне. Но значит ли это, что все понимают, для чего он нужен?

Респонсивный дизайн – это не только разработка сайтов для мобильных устройств, здесь речь идет об адаптации макетов под разные размеры экрана (viewports).

В этом уроке мы рассмотрим основные принципы, лежащие в адаптивном веб-дизайне, для лучшего понятия этой техники. Затем, мы создадим адаптивный веб-сайт, который будет отлично масштабироваться на больших и малых экранах. Респонсивный веб-дизайн стал очень популярным, когда все больше и больше людей используют мобильные устройства, такие как iPhone, iPad, BlackBerry, а также другие смартфоны и планшеты с доступом к интернету.

Важно понимать, что сайт не должен быть построен под конкретный рабочий стол или мобильное устройство. Здесь важна способность макета адаптироваться под различные размеры.

Разочарование пользователей

Некоторые люди думают, что сократить функционал и устранить контент, который они считают несущественным, это является нормальным для пользователя. Но как вы можете быть уверены, что информация, которую вы урезали или перенесли на вторичную страницу, не является контентом, который наиболее важный для меня?!

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

Для респонсивного веб-сайта, мы можем использовать один и тот же код как для настольного компьютера, так и для мобильного устройства. Это удобно тем, что мы не должны отдельно корректировать контент для каждого устройства. Но многие веб-сайты скрывают свое содержимое, считая его ненужным для мобильных пользователей. В этом есть две проблемы:

  • Во-первых, это эффективно наказывает мобильных пользователей, просматривающих сайт.
  • Во-вторых, скрытые стили в CSS, не означает, что контент не загружается. Это может массово повлиять на эффективность, особенно для тех, у кого плохая связь.

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

Пошаговое руководство

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

Ключевым элементом гибкости в адаптивном дизайне, является fluid ширина макета. Все, что вам нужно сделать, это создать wrapper, content и column widths, которые будут адаптироваться под различную ширину устройств. В этом нет ничего нового, но сейчас это важнее, чем когда-либо. Чтобы не усложнять задачу, мы создадим fluid страницу, состоящую из навигации, главного изображения и двух колонок, которая учитывает расположение на устройствах различных размеров. Мы, также включили respond.min.js, который позволяет медиа-запросам работать в IE6-8.

Основная HTML структура:

CSS

Когда дело доходит до CSS, то установить max-width, будет хорошей идеей, это остановит сайт от масштабирования на огромных экранах, но не будет удерживать от сокращения страниц. Один из основных вопросов при переключении с фиксированной ширины на fluid, это изображения. В CSS, есть простое решения этой проблемы. Просто установите ширину изображения на 100%. Также добавим auto для высоты изображений, чтобы избежать сплющенных изображений в Опере и Сафари на малых экранах:

Ваше изображение будет отображаться на его родительском элементе в полную ширину, и будет сжиматься вместе с ним. Только убедитесь, что изображения max-width, не превышают максимальную ширину его контейнера.

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

Переключение главной навигации

Основная причина, почему вам надо сменить навигацию, это происходящая минимизация, которая может привести к нечитаемости и трудности нажатия кнопок. Используя этот метод, вы облегчите жизнь пользователя. Вы также можете заметить в коде, что мы внесли изменения в #main и aside разделы, для соединения их в одну колонку.

Вы заметите, что на некоторых мобильных устройствах, ваш веб-сайт, автоматически сжимается под размеры данного экрана. Этот момент, как раз и становится проблемой, когда нам нужно увеличить размер экрана, чтобы навигировать по неудобному содержания.

Чтобы разрешить медиа-запросам войти в полный эффект, обычный мобильный, оптимизированный, респонсивный сайт должен содержать что-то вроде следующего:

Адаптивная верстка (теория).

В своей работе вам придется решать задачу разработки страниц сайта под различные размеры экрана, начиная с небольших смартфонов и заканчивая широкоформатными мониторами и телевизорами. С ростом портативной техники и её активного использования в повседневной жизни, необходимость в разработке универсальных страниц адаптированных под различные устройства и разрешения стала как никогда актуальна.

В этой cтатье мы с Вами разберем такие понятия как отзывчивый веб-дизайн и адаптивный веб-дизайн, рассмотрим их отличия и преимущества, рассмотрим ситуации при которых необходимо использовать эти приемы на практике. Кроме того, мы с Вами узнаем, что такое медиазапросы, как и для чего необходимо использовать их в своих стилях.

Основные понятия

Я не ставлю в этой статье перед собой цель разложить по полочкам и поставить точку в путанице относительно терминов, которые касаются создания страниц сайта, которые будут отображаться одинаково на всех типах устройств, будут сжимать макет в зависимости от разрешения, будут использовать различные стили для определенного типа устройства и тому подобное, на эти темы написана не одна книга. Основная задача это получить понимание как решать подобные задачи и какие при этом нативные инструменты мы можем использовать. Давайте для начала разберем основные понятия.

Что представляет из себя отзывчивый веб-дизайн (responsive web design)? Это прежде всего гибкая, или по другому «резиновая» сетка макета вашего сайта основаная на относительных единицах измерения, которая позволяет использовать один макет для разного типа устройств, гибкие изображения и видеоматериалы, и медиазапросы.

Для чего необходима гибкая сетка? На страницы Вашего сайта могут зайти с устройств, разрешение экрана которых будет отличаться и создание страниц с фиксированной шириной в этом случае не имеет смысла, так как в этом случае необходима страница, которая будет сужаться, или расширяться, чтобы подстроиться и адаптироваться под конкретное устройство. Кроме того, при создании гибкой сетки мы можем масштабировать изображения и видеоматериалы, таким образом чтобы они поместились на соответствующем размере экрана.

Следующая важная тема этой статьи и CSS в целом — это медиазапросы, они позволяют отправлять браузеру различные стили в зависимости от определенных условий, например, таких как тип устройства, разрешение, ориентация и тому подобное.

В целом отзывчивый веб-дизайн это довольно таки узкое понятие, которое в современных реалиях является частью такого объемного понятия как адаптивный веб-дизайн, который включает в себя такое понятие как отзывчивый веб-дизайн.

И так, адаптивный веб-дизайн (adaptive web design) включает в себя гибкую сетку макета сайта, гибкие изображения и видеоматериалы, медиазапросы и прогрессивное улучшение (progressive enhancement).

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

Чтобы вы понимали адаптивный веб-дизайн не является отдельной технологией, или конкретным методом построения страниц сайта, так как в нем собраны множество методов верстки, благодаря которым макет Вашего сайта будет адаптироваться к различным условиям.

Подготовка к адаптивной верстке

В настоящее время до сих пор многие сайты созданы для отображения на экранах мониторов, по этой причине мобильные браузеры не отображают страницу на все 100%, а отображают её в виртуальном окне (viewport), которое, как правило, шире экрана устройства. Чтобы страница поместилась на экране устройства мобильные браузеры уменьшают её масштаб (сжимают отображаемый результат, чтобы его можно было увидеть сразу), коэффициент масштабирования зависит от характеристик конкретного устройства. Пользователи при этом могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.

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

Впервые в мобильной версии браузера Safari появился метатег области видимости (viewport meta tag), который позволяет разработчикам сайтов контролировать как размер окна просмотра, так и масштаб самой страницы. Впоследствии остальные современные мобильные браузеры осуществили поддержку этого метатега, не смотря на то, что в тот момент он не являлся частью какого-либо веб-стандарта.

Ранее в статье «Метаданные в HTML» учебника HTML мы уже сталкивались с метатегами (HTML элемент ), они предоставляют дополнительную информацию браузеру пользователя о содержимом страницы и могут передавать браузерам дополнительные инструкции о способах отображения страницы на экране, позволяют указать описание страницы, ключевые слова, автора документа и другие метаданные, к которым относится и возможность отмены масштабирования в браузерах мобильных устройств.

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

  • Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
  • Значение w > атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height .
  • Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.

Значение атрибута Определение
width Определяет ширину в пикселях области просмотра (значение — положительное целое число или device-width ).
height Определяет высоту в пикселях области просмотра (значение — положительное целое число или device-height ).
initial-scale Определяет соотношение между шириной устройства ( device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение — положительное целое число от 0.0 до 10.0.
minimum-scale Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale ). Значение — положительное целое число от 0.0 до 10.0.
maximum-scale Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale ). Значение — положительное целое число от 0.0 до 10.0.
user-scalable Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Приоритет создания стилей

Давайте рассмотрим еще одну важную теоретическую тему, связанную с тем под какое устройство начинать разработку сайта — для мобильных устройств или компьютеров?

В настоящее время существует два основных подхода:

  • Mobile first — подход при котором разработка сайта начинается и ориентирована на пользователей мобильных устройств. В первую очередь описываются стили, предназначенные для смартфонов, а затем дизайн дорабатывается для планшетных устройств и настольных компьютеров (начинается с размещения основной функции, а затем постепенно добавляются дополнительные элементы для более высоких разрешений, часто это называют progressive enhancement — прогрессивным улучшением). При использовании этого подхода Вы должны учитывать то, что Ваши страницы должны быть оптимизированы, максимально быстро загружаться и отображать важное содержание в первую очередь. Прочая информация должна загружаться и отображаться пользователю по его требованию, страница не должна загружать те ресурсы, которые не потребуются пользователю для получения необходимой информации. Этот подход в источниках упоминают также как content first, по той причине, что контент вашего проекта должен быть тщательно исследован и структурирован, чтобы быть классифицированным на основе важности. Подход mobile first может быть намного дороже, чем подход desktop first из-за более длительной фазы подготовки и опыта, необходимого для создания проекта.
  • Desktop first — подход при котором разработка ведется для для многофункциональных проектов, ориентированных на пользователей настольных компьютеров. В первую очередь описываются стили, предназначенные для компьютеров, а затем дизайн дорабатывается для планшетных устройств и смартфонов. При использовании этого подхода Вы первоначально доводите до максимума и совершенства дизайн и функционал Ваших страниц, а затем адаптируете его под новые разрешения и устройства, удаляя при этом необходимые колонки, перестраиваете стили и позиционируете отдельные блоки, изменяете шрифт и тому подобное. Переход к меньшему разрешению часто называют изящной деградацией — graceful degradation, при которой происходит скрытие и обертывание элементов, пытаясь сохранить при этом как можно больше исходного функционала. Как правило, деградация с настольной версии на мобильную приводит к сбоям в работе пользователей, это связано с тем, что некоторые настольные технологии просто не поддерживаются на мобильных устройствах и должны быть заменены резервным решением, которое, вероятно, будет сложным и дорогостоящим для реализации. Крупные компании зачастую создают дополнительно отдельное приложение для Android или iOS для основных функций, которые будут служить для оптимизации работы мобильных пользователей.

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

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

Медиазапросы

Прежде всего давайте ответим на такой вопрос, что такое медиазапросы и для чего они нужны? Медиазапросы позволяют установить страницам сайта стили на основании определенных характеристик устройства, связанных с отображением контента, например, таких как ширина, высота, ориентация и разрешение экрана. Медиазапросы являются неотъемлемой частью CSS, они имеют широкое применение в адаптивном веб-дизайне, так как позволяют создать привлекательное и читаемое представление Вашего сайта на экране любого устройства с которого он просматривается.

Используя медиазапросы Вы сможете создавать точки останова, это чем то похоже на создание ключевых кадров в анимации, только в этом случае вы будете использовать разрешение экрана в пикселях, а не временные отрезки. Например, если ширина области простмотра устройства меньше 480 пикселей, то использовать одни стили, если ширина области простмотра устройства находится в диапозоне от 480 пикселей до 769 пикселей использовать другие стили и так далее.

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

Цукерберг рекомендует:  Первые шаги Bootstrap

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

Ниже представлено отображение этого сайта в режиме устройства в браузере Chrome:

Что должны изменять медиазапросы?

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

Исходя из представленного изображения медиазапросы должны быть ориентированы на следующие изменения:

  • «Резиновая ширина» — использование фиксированной ширины (свойство w >auto ), или значения в процентах. Это позволит превратить фиксированную сетку макета в резиновую, и независимо от разрешения экрана элемент поместиться на экране, не вызывая при этом переполнение содержимого. Обратите внимание, что в этом случае даже при смене ориентации экрана содержимое элемента просто растянется и подстроится под необходимое разрешение.
  • Изменение количества колонок — в зависимости от разрешения экрана изменяйте количество колонок в макете, например, четыре колонки будут хорошо смотреться на настольных компьютерах и планшетах с альбомной ориентацией, но этот макет не будет подходить для смартфонов, где было бы предпочтительно использовать две колонки и тому подобное.
  • Сужение пустого пространства — по возможности производите сужение внутренних и внешних отступов элементов (margin и padding) для размещения большего количества необходимой информации на небольших экранах, при использовании высоких значений для отступов пользователям мобильных устройств потребуется лишний раз прокручивать содержимое, что может негативно сказаться на визуальном отображении и удобстве при чтении.
  • Изменение навигации — традиционная горизонтальная панель навигации, используемая на большинстве сайтов, по мере сужения экрана будет вызывать переполнение содержимого, или перемещать элементы меню на новые строки, занимая всё больше пространства экрана. В некоторых случаях такое поведение будет допустимо, но в большинстве случаев такой подход не будет решать необходимую задачу. Существует несколько подходов изменения навигации, например, использование отдельной навигации для мобильных устройств, которая будет отображаться при определенном разрешении, а горизонтальная панель при этом будет скрываться, или применение динамических изменений навигации с использованием языка программирования JavaScript и CSS стилей, которые позволят создать оптимальное отображение на устройстве, например, отображать вертикальную навигацию по нажатию на определенную кнопку.
  • Настройка шрифта — при создании медиазапросов обратите внимание на тот момент, что крупные заголовки хорошо смотрятся на мониторах настольных компьютеров, но на мобильных устройствах трудно читаются и могут занимать большое количества пространства. По этой причине необходимо уменьшать размер шрифта для мобильных устройств, а что касается основного текста с информацией, то в этом случае наоборот следует увеличивать размер шрифта для лучшего восприятия информации.
  • Изящная деградация — используйте медиазапросы для того, чтобы скрыть то содержимое страниц сайта, которое по Вашему мнению допустимо явно не отображать пользователям мобильных устройств. Как правило, для этого достаточно указать для необходимых элементов свойство display со значением none .
  • Изменение фоновых изображений — если вы используете растровые изображения, например, формат png в качестве фона для элемента, обратите внимание на такой момент, что при уменьшении разрешения экрана фоновое изображение будет масштабироваться теряя при этом свой изначальный вид. Обратите внимание, что вы можете использовать для необходимого вам элемента другое фоновое изображение меньшего размера, которое будет лучше подходить для определенного размера экрана. Для этих целей изменяйте значение CSS свойства background-image для вставки изображения в качестве фонового для конкретного элемента.

Подключение медиазапросов

В этом разделе мы с Вами рассмотрим как произвести подключение медиазапросов к таблице стилей. Самым распространенным вариантом подключения является внедрение медиазапроса в таблицу стилей с использованием CSS правила @media .

Ранее в этом учебнике мы уже рассматривали такие правила как @font-face , которое позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов», правило @keyframes , которое позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров (или точки) в процессе анимации, и правило @import, оно используется для импорта содержимого CSS файла в текущую таблицу стилей, мы о нем еще поговорим далее в статье.

Подключение медиазапросов с использованием правила @media

Правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Это правило имеет следующий синтаксис:

Давайте детально разберем из чего состоит синтаксис этого правила.

Логические операторы

Вы можете комбинировать медиазапросы с использованием логических операторов:

Значение Описание
and Оператор and («И») используется для объединения нескольких медиазапросов в один.
not Оператор not («Логическое НЕ») обращает результат — если медиазапрос был истинным без «not», то он станет ложным, и наоборот.
only Оператор only («Только») может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиазапрос (игнорируют), содержащий в себе этот логический оператор.
, Оператор «,» позволяет объединить несколько медиазапросов через запятую. Если хотя бы один запрос возвращает «true» (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR («ИЛИ» ).

Устройства (media type)

Вы можете использовать медиазапросы для конкретных типов устройств:

Значение Описание
all Подходит для всех типов устройств. Это значение по умолчанию.
print Предназначен для печатных страниц и для режима предварительного просмотра печати.
screen Экраны компьютера.
speech Речевые синтезаторы, устройства для чтения с экрана (для чтения страниц вслух).

Мультимедийные функции (media functions)

Ниже представлен перечень основных мультимедийных функций, которые являются частью современного стандарта:

Значение Описание
aspect-ratio Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio : 5/4 (соотношение пять к четырем).
color Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. Допускаются только положительные значения. Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент.
color-index Количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
grid Определяет основано ли выходное устройство на сеточной системе (например, терминал «tty» или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1, если устройство растровое, то значение будет равно .
height Задает высоту области просмотра (используются единицы измерения CSS).
max-aspect-ratio Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
max-color Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения.
max-color-index Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
max-height Задает максимальную высоту области просмотра (используются единицы измерения CSS).
max-monochrome Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
max-resolution Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
max-width Задает максимальную ширину области просмотра (используются единицы измерения CSS).
min-aspect-ratio Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
min-color Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения.
min-color-index Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
min-height Задает минимальную высоту области просмотра (используются единицы измерения CSS).
min-monochrome Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
min-resolution Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
min-width Задает минимальную ширину области просмотра (используются единицы измерения CSS).
monochrome Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
orientation Определяет, находится ли область просмотра в режиме альбомной ориентации — экран шире, чем высота, или в портретной ориентации — высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation : landscape , а для портретной и orientation : portrait .
resolution Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
scan Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка — ( interlace ), прогрессивная развертка ( progressive ).
width Задает ширину области просмотра (используются единицы измерения CSS).

В настоящее время спецификации Media Queries Level 4 и Media Queries Level 5 включают некоторые улучшения синтаксиса и дополнительно вводят прочие мультимедийные функции, которые имеют ограниченную поддержку и возможно будут либо изменены, либо удалены к тому времени, когда они станут частью живого стандарта. По этой причине мы будем рассматривать в примерах лишь тот синтаксис и те функции, которые активно используются в настоящее время, к ним можно отнести такие как width , min-width , max-width , height , min-height и max-height .

Подключение медиазапросов с использованием тега

Вы можете подключать различные стили для различных устройств, используя HTML тег (определяет связь между документом и внешним ресурсом) и его атрибута media:

Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .

Подключение медиазапросов с использованием тега 2. Используя CSS правило @media внутри HTML тега

Обратите внимание, что при использовании атрибута media тега используется тот же синтаксис, что и при использовании правила @media .

Подключение медиазапросов с использованием правила @import

Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Медиазапросы, используемые в Bootstrap 4

В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.

Так как Bootstrap разработан, чтобы быть мобильным в первую очередь, разработчики фреймворка используют несколько медиазапросов для создания разумных точек останова для макетов и интерфейсов. Эти точки останова в основном основаны на минимальной ширине области просмотра и позволяют масштабировать элементы по мере изменения области просмотра.

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4:

Bootstrap в основном использует вышеуказанные диапазоны запросов для макета, системы сеток и компонентов, но иногда используют и медиазапросы, которые идут в другом направлении (заданный размер области просмотра или меньше).

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4:

В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):

Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and («И»), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.

Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

Надеюсь, что к этому моменту у Вас появилось понимание какие точки останова используются в современном фреймворке Bootstrap и как, и главное для чего используются медиазапросы впринципе. В будущем на основе рассмотренных точек останова Вы сможете создавать свои собственные современные адаптивные макеты и интерфейсы, добавляя в зависимости от решаемых задач необходимые медиазапросы для изменения определенных стилей элементов.

Обращаю Ваше внимание, что представленные значения не являются обязательными для использования, а представлены лишь с ознакомительной целью и служат отправной точкой в мир адаптивной верстки ;)

Vavik 96

Интернет дайджест для вебмастеров и фотографов

Создание адаптивного дизайна сайта на CSS3

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

Основная проблематика верстки сайта является его правильная адаптация для различных экранов. В данном уроке мы рассмотрим как создать макет сайта с помощью Media Queries который будет помогать в адаптации ресурса под разрешение экранов. И так, приступим.

Шаг 1. HTML

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

Internet Explorer версией ниже 9-ой вряд ли будет поддерживать предложенные в HTML5 элементы типа «header», «article», «footer», «figure» и так далее. Включив в код javascript-файл html5.js, мы сделаем так, чтобы IE начал распознавать новые элементы.

С разметкой мы закончили, теперь рассмотрим стили.

Шаг 2. CSS

Следующий код CSS сбросит параметры HTML5-элементов (article, aside, figure, header, footer и так далее), и сделает их блочными.

Основной контейнер «pagewrap» имеет ширину 980px. «Header» имеет фиксированную высоту 160px. Контейнер «content» шириной 600px и прижат влево. «Sidebar» шириной 280px и прижат вправо.

CSS3 Media Queries

Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Вы можете включить ее, добавив Javascript файл css3-mediaqueries.js.

Внедрение javascript Media Queries

Создаем новый CSS файл для media queries.

Размер экрана меньше 980px (резиновый макет)

Для размера экрана меньше 980px применим следующие правила:

  • pagewrap = ширина 95%;
  • content = ширина 60%;
  • s >Совет: используйте проценты (%), чтобы сделать блоки резиновыми.

Размер экрана меньше 650px (одноколоночный макет)

Затем, задаем CSS правила для размера экрана меньше 650px.

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

Размер экрана меньше 480px

Этот CSS будет применяться для размера экрана меньше 480px, которая соответствует ширине iPhone в альбомной ориентации.

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

Создаем эластичные изображения

Чтобы сделать изображения эластичными, просто добавьте max-width:100% и height:auto. Изображения max-width:100% и height:auto работает в IE7, но не работает в IE8 (да, еще один странный баг). Для исправления нужно добавить width:auto\9 для IE8.

Создаем эластичные встраиваемые видео

Для видео применяем те же правила, как для изображений. По непонятным причинам max-width:100% (для видео) не работает в Safari. Нужно использовать width: 100%.

Основной мета-тэг масштабирования для iPhone

Поизменяем размер экрана, что бы увидеть media queries в действии.
Источник

Как сделать адаптивный дизайн через CSS

Наличие адаптивного дизайна необходимость – жизнь это доказала своими граблями, никакая Mobile Joomla не даёт такого эффекта, как прямая адаптация сайта. Сегодня я поведаю, как сделать адаптивный дизайн через правку стилей CSS с помощью своей головы и пальцев рук. Разложить всё по полочкам не получится, так как каждый шаблон имеет нюансы, но толчок для начала адаптации я дам.

Адаптация под десктоп

Для начала делаем адаптацию под десктоп. Это базовый этап, от него потом и начинаются танцы с бубном. Многие ошибочно воспринимают мир, думая, что с отображением сайта на обычных компьютерах у них нет проблем, так как шаблон кто-то верстал, и он ровно смотрится при обычном разрешении. При разрешении вашего монитора да, а как на большем экране, как вы смотритесь с absolute и пикселями на экране с разрешением 1920×1080? Цель адаптации дизайна – нормальное отображение сайта на мобильных и отсутствие косяков на больших экранах.

Что делаем? Главное – переводим все большие значения в css шаблона из пикселей (px) в проценты (%). Тут есть несколько правил:

  1. — Изменяем px на % только для больших значений, менять 5 px на 1% (для примера) не надо,
  2. — Все работы делайте через Файербаг, потом переносите значения в реал.

Немного для общего понимания. У вас есть сайт, на котором ширина страницы 1000 px, в ней есть три блока – центральный 800 px и два боковых сайтбара по 100 px. Значит после замены на проценты размер страницы станет 100%, центральный контейнер 80% и боковые блоки по 10%. Грубо, но понятно. Теперь чуть больше конкретики.

У меня до адаптации (сохранил для истории старый файл CSS) основной контейнер был прописан в стилях так:

После адаптации стал таким:

Топ-меню изменилось с:

А смещение блока content реализовано с:

Обратите внимание на код:

overflow: hidden !important;

Им мы убираем прокрутку по горизонтали, это пригодится для мобильной адаптации, иногда имеет смысл указывать только запрет горизонтальной прокрутки с помощью:

overflow-x: hidden !important;

Все работы ведите через Firebug или инспектор Google, проверяйте глазами – сайт должен выглядеть после перевода px в % так же. Экран пока можете не сжимать, до мобильной адаптации ещё не дошли, пока сделали базовую работу для больших экранов.

CSS под мобильные устройства

Базу создали, кстати, это самый сложный этап, теперь надо добиться, чтобы сайт корректно отображался во всех мобильных устройствах. Предыдущих манипуляций мало, так как под маленький экран все сжать в процентах не получится. Согласитесь, разглядеть на смартфоне при разрешении 320 px по ширине сайтбар в 10% невозможно.

Нам понадобится использовать @media screen and, которые вносят изменения в стили для устройств с конкретным разрешением. Я вначале определил с помощью уменьшения экрана браузера, на каком разрешении у меня начинаются проблемы с отображением. Сужая экран, я нашёл свою точку «кривизны», она начинается при ширине 1000px, значит прописывать основные мобильные стили надо отсюда – всё, что больше будет отображаться в стилях обычного десктопа, что меньше отдельными стилями.

Пример @media screen and

Я прописал CSS под мобильные устройства на шаблоне Joomla 1.5 так:

@media screen and (max-width:500px)

@media screen and (max-width:400px)

Немного конкретики по коду.

При ширине экрана меньше 1000 px у меня перестают отображаться боковые сайтбары, шапка, пагинация и футер. Моё имхо – они в мобильной версии не нужны. Это делает код:

.page-numbers, #footer, #navigation, #header,.logo,.nav-box .

По умолчанию в мобильных Joomla 3 и выше боковые блоки уходят вниз, растягивая страницу до безобразия, так что и на новых движках можно кое-что подправить ручками.

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

Для них указано, что максимальный размер картинки по ширине 96% (с отступами красиво), а высота идёт на автомате.

Конкретика закончилась, ещё раз по общему смыслу адаптации сайта (дизайна) через CSS.

  1. — Изменяем большие значения px на %,
  2. — Прописываем отдельно @media screen and для мобильных устройств.

Через @media screen and обязательно закрывайте ненужные для мобильного блоки для вывода, но переводите в % те значения, которые некорректно отображаются, так как их оставили в пикселях в десктопной версии CSS.

Как результат – удобство для пользователя при работе с Joomla Mobile было 65-70%, при адаптивном дизайне на CSS, стало 99%. Выводы на лице – проверка Яндекса и Goole на адаптивность не проходилась, сейчас проходит на ура.

Верстка адаптивных веб-страниц

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

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

Адаптивный веб-дизайн (англ. responsive web design, RWD) — это подход к созданию веб-страниц, при котором их внешний вид определяется через CSS, основываясь на ширине окна браузера. Это позволяет обеспечить удобный дизайн для любого устройства, без необходимости создания нескольких разных сайтов.

CSS-инструменты для адаптивного дизайна

В адаптивном веб-дизайне используются гибкие grid-системы, масштабируемые изображения и специальные медиа-запросы CSS (некоторые из них мы уже использовали в практических уроках учебника).

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

Медиа-запросы — это CSS-технология, которая позволяет определять условия для отображения тех или иных стилей. К примеру, вы можете задать один набор CSS-правил для экранов шириной менее 768 пикселей, второй — для ширины более 991 пикселей и т. д.

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

Настройки для адаптивного дизайна

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

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

Если же дизайн вашего сайта адаптивен, вам необходимо дополнительно сообщить об этом браузеру. Делается это легко — просто добавьте внутрь тегаследующую строку:

Данный мета-тег говорит браузеру, что ширина контента должна быть равна ширине экрана браузера, которая в свою очередь равна ширине экрана устройства, с которого просматривается веб-страница. Initial-scale контролирует уровень масштабирования при загрузке страницы.

К слову, указание этого мета-тега важно и для Google: при его отсутствии система не будет воспринимать веб-страницу как ту, что адаптирована под мобильные устройства.

Далее в учебнике: медиа-запросы CSS.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих