Сегодня сайт должен нормально отображаться не только на экране компьютера, но и на экранах планшета и телефона. Веб сайт отзывчив и приятен, если он может адаптироваться к экрану пользовательского устройства. Адаптивный веб-дизайн в настоящее время чрезвычайно важен и фактически является одной из техник, которую вы должны освоить как веб-разработчик или веб-дизайнер. В этой статье я покажу вам, как легко создать адаптивный сайт и как применять методы адаптивного дизайна на существующих веб-страницах за три простых шага.
Макет
При создании адаптивного веб-сайта или изменении существующего сайта первое, на что нужно обратить внимание — это макет. Когда я создаю адаптивные сайты, я всегда начинаю с создания адаптивного макета с фиксированным размером по умолчанию. Например, ширина CatsWhoCode.com по умолчанию составляет 1100 пикселей.
Как только меня устраивает созданный макет, я добавляю медиазапросы и небольшие изменения в свой CSS для создания адаптивного сайта. Когда дело доходит до веб-дизайна, проще сосредоточиться на одной задаче.
По окончании работ с макетом, первое, что нужно сделать, это вставить следующие строки в теги head на вашей HTML-странице. Это позволит установить вид на всех экранах с соотношением сторон 1 × 1 и удалить функциональность по умолчанию с iPhone и других мобильных устройств, которые отображают веб-сайты в полноэкранном режиме и позволяют пользователям увеличивать макет.
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
Пришло время добавить несколько медиа-запросов. Согласно сайту W3C, медиа-запросы состоят из медиа-типа и нуля или других выражений, которые проверяют условия определенных медиа-функций. С помощью медиазапросов презентации могут быть адаптированы к конкретному диапазону устройств вывода без изменения самого контента.
Другими словами, медиа-запросы позволяют вашему сайту хорошо выглядеть на всех видах дисплеев, от смартфонов до больших экранов. Это то, что называется адаптивным веб-дизайном.
Медиа-запросы зависят от макета вашего сайта, поэтому мне довольно сложно предоставить вам готовый фрагмент кода. Тем не менее, приведенный ниже код является хорошей отправной точкой для большинства сайтов. В этом примере primary основной областью содержимого, а secondary боковой панелью.
Взглянув на код, вы увидите, что я определил два размера: первый имеет максимальную ширину 1060 пикселей и оптимизирован для планшетного отображения. primary занимает 67% своего родительского контейнера и secondary 30% плюс 3% оставленного поля.
Второй размер предназначен для планшетного портрета и меньших размеров. Из-за небольших размеров экранов смартфонов я решил дать primary ширину 100%. secondary также имеет ширину 100% и будет отображаться ниже primary.
Как я уже сказал, вам, вероятно, придется немного адаптировать этот код для соответствия конкретным потребностям вашего сайта. Вставьте его на свой сайт в css файл.
/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
После этого давайте посмотрим, насколько отзывчивым является ваш макет. Для этого я использую этот замечательный инструмент, созданный Мэттом Керсли. Конечно, вы можете проверить результат на своем мобильном устройстве.
Медиа
Адаптивный макет — это первый шаг к полностью адаптивному веб-сайту. Теперь давайте сосредоточимся на очень важном аспекте современного веб-сайта: медиа, таких как видео или изображения.
Приведенный ниже код CSS гарантирует, что ваши изображения никогда не будут больше, чем их родительский контейнер. Это очень просто и работает для большинства адаптивных сайтов. Для правильного функционирования этот фрагмент кода должен быть вставлен в таблицу стилей CSS.
img { max-width: 100%; height: auto; }
Хотя описанная выше техника эффективна, иногда вам может потребоваться больший контроль над изображениями и отображение другого изображения в соответствии с размером дисплея клиента.
Вот техника, разработанная Николасом Галлахером. Давайте начнем с HTML:
Как видите, мы использовали атрибут data- * для хранения URL заменяющих изображений. Теперь давайте использовать всю мощь CSS3, чтобы заменить изображение по умолчанию одним из указанных замещающих изображений, если выполняется условие min-device-width:
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
Впечатляет, не правда ли? Теперь давайте посмотрим на другое очень важное средство медиа на современных веб-сайтах: видео.
Поскольку большинство сайтов используют видео с YouTube или Vimeo, я решил применить технику от Ника Ла. Этот метод позволяет сделать встроенные видео адаптивными.
HTML :
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
А теперь CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
После того, как вы применили этот код на своем веб-сайте, встроенные видео стали адаптивными.
Типографка
Последний шаг этого руководства важен, но разработчики часто игнорируют его — типографика.
До недавнего времени большинство разработчиков использовали пиксели для определения размеров шрифта. Хотя пиксели хороши, когда ваш сайт имеет фиксированную ширину, адаптивный сайт должен иметь адаптивный шрифт. Размер шрифта должен соответствовать ширине родительского контейнера, чтобы адаптироваться к экрану и нормально отображаться мобильных устройствах.
Спецификация CSS3 включает в себя новый модуль с именем rems. Он идентично модулю em, но относятся к элементу html, поэтому они намного проще в использовании.
Поскольку значения относятся к элементу html, не забудьте сбросить размер шрифта html:
html { font-size:100%; }
Сделав это, вы можете определить размеры шрифта, как показано ниже:
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }
