», и каким образом разные дизайны применяют этот термин и технологию. Теперь, когда мы ознакомились с некоторыми примерами реализации в действии, давайте попробуем разработать собственный адаптивный сайт!
В нашем сегодняшнем руководстве мы расскажем вам о разработке структуры главной страницы, и добавим туда функционал media queries, что поможет нам ускорить загрузку веб-сайта, облегчит процесс навигации для пользователей, а также, что немаловажно, поможет нам сохранить опрятный и привлекательный дизайн при посещении сайта с различных устройств, типа мобильных устройств, различных ОС и при различных разрешениях экрана.
Перед тем, как с головой уйти в процесс разработки HTML-кода, давайте сначала обработаем мета-тэг «viewport». Устройства Apple iPhone и iPod Touch запрограммированы на автоматическое масштабирование вебсайтов в iOS-версии браузера Safari.
Эта технология представляет возможность отобразить веб-сайт полностью на экране, но он будет в уменьшенном виде. Так как мы собираемся задействовать media queries специально для адаптации дизайна под экраны разных размеров, нам не нужно автоматическое масштабирование, предусмотренное в устройствах от Apple. Мета-тэг viewport также позволит вам выставить параметры относительно того, насколько сильно пользователь сможет увеличить или уменьшить ваш сайт. Но главное здесь заключается в возможности выставить исходный масштаб, в котором будет открыт сайт. Конкретно в нашем сегодняшнем руководстве мы рекомендуем вам отображать сайт вообще без масштабирования.
Начав работу с HTML, вы наверняка заметите, что документ состоит из вполне простых HTML5-элементов, за исключением мета-тэга viewport и нашего div’а с основным фоном.
Body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, fieldset, legend, label, input, textarea {
margin: 0; padding: 0; border: 0;
}
sh1, h2, h3, h4, h5, h6, p {
margin: 0 0 1em 0;
}
h1{font-size: 200%;}
h2{font-size: 170%;}
h3{font-size: 160%;}
h4{font-size: 140%;}
h5{font-size: 120%;}
Теперь, так как мы занимаемся разработкой с нуля, вы можете открыть тэг body и добавить туда стили. Мы выставили цвет фона на белый, а цветом текста был выбран темно-серый. Сочетание черного текста на белом фоне зачастую вызывает ощущение чрезмерного контраста, и у многих посетителей из-за этого рябит в глазах.
Html, body { height: 100%; }
Также обратите внимание на то, что размер шрифта указан в единицах em, и это один из важнейших элементов при разработке адаптивного дизайна, так как размер данной единицы основывается на процентном соотношении. Если вы выставите размер шрифта в пиксельном измерении, то он не будет соответствовать остальному дизайну, если сайт будет уменьшен для корректного отображения на меньших экранах. Буквы либо займут весь экран, либо будут накладываться друг на друга, а это совсем некрасиво.
Мы также можем добавить стиль в наш класс.homeContent и в id #mainBG. Мы определили высоту страницы, выставили ширину на 100%, и центрировали контент в рамках класса.homeContent. ID #mainBG будет отвечать за фоновое изображение, которым в нашем примере является стоковая картинка, полученная у автора . Мы также выставили параметр background-size на cover, что растянет изображение на весь экран, и позволит нашему фоновому изображению сохранять правильные пропорции при отображении на экранах с большим разрешением. Размер нашего фонового изображения «big.jpg» оставляет 1920x1189.
HomeContent {
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
}
#mainBG {
background: url(images/big.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Теперь, когда мы закончили с разработкой основы, давайте внедрим media queries. Первые два запроса будут относиться к планшетным ПК. Посредством этих запросов мы сможем загрузить фоновое изображение среднего размера, так как загрузка большого изображения может отнять как время, так и трафик, и если нам не нужно изображение, в размерах дважды превышающее размер экрана, то его можно и не загружать. Размер нашего фонового изображения «medium.jpg» составляет 1024х770 пикселей. Также мы должны расположить его таким образом, чтобы оно корректно отображалось на всех типах планшетов.
@media only screen and (max-width: 1024px) and (orientation:landscape) {
#mainBG { background: url(images/medium.jpg) 50% 0 no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
#mainBG { background: url(images/medium.jpg) 50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
Последний запрос будет относиться к мобильным телефонам. Посредством данного запроса мы будет отображать наше фоновое изображение под названием «small.jpg», размеры которого составляют 767х475.
@media only screen and (min-width: 0px) and (max-width: 767px) {
#mainBG { background: url(images/small.jpg) 75% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
Предварительный просмотр проделанной работы в браузере. Откройте свой шедевр сначала на весь экран, а затем постепенно уменьшайте окно просмотра. Вы увидите, как изображение незамедлительно начинает изменяться в размерах. Попробуйте определить, в каком положении задействуются media queries и меняется размер изображения.
Зачем обязательно надо делать картинки адаптивными ? К сожалению, то счастливое время, когда можно было вставить картинку на веб-сайт и указать подлинные её размеры, безвозвратно ушло. Теперь, мы должны все время думать и о маленьких экранах.
Что произойдёт, если размеры картинки будут больше размера экрана? Во-первых появится горизонтальная полоса прокрутки, картинки выйдут за пределы адаптивного блока, тем самым сломают дизайн сайта или просто частично обрежутся. В любом случае, так не годится и картинки надо тоже адаптировать под меняющуюся ширину экрана.
Для начала, в теге img больше не надо указывать ширину и высоту.
Для того, чтобы оставить 3, 2 и в конечном счете только одну картинку в ряду, необходимо задействовать медиа запросы.
После определенной ширины экрана, например 375 пикселей, в ряду должно остаться только 2 картинки.
В таблице стилей пишем следующий код:
@media (max-width: 375px) {
#gallery #product {
max-width: 50%
}
#gallery {
flex-direction: column;
}
}
При верстке на flexbox-ах , необходимо для общего контейнера #gallery , задать атрибут.
Flex-direction: column;
Этим самым, мы отменяем действие flexbox-ов на блоки с картинками, которое принудительно держало их в ряду. Половина картинок перенеслась на нижний ряд.
Ниже приведен пример, что я имею ввиду.
Задача все та же, на разных устройствах фоновая картинка должна подстраиваться под разные разрешения экрана, не теряя своих пропорций и качества.
В HTML разметке:
В CSS таблице:
Теперь подробнее разберем наиболее значимые свойства и их значения для решения нашей задачи.
Background-size: cover;
Значение "cover" позволяет нашему изображению подстраиваться под разные размеры экранов, не теряя пропорций. Однако, надо учитывать, что фоновая картинка должна иметь действительно большие размеры, желательно не меньше 2000 пикселей по ширине. В противном случае, если размеры картинки меньше размера экрана, произойдет пикселизация, то есть изображение будет размытым.
Background-attachment: fixed;
Что будет, если количество контента по высоте превысит высоту фонового изображения, выйдет за его границы?
На скриншоте ниже показано, как это будет выглядеть без fixed .
Так вот, чтобы этого не произошло, надо зафиксировать фоновую картинку в окне просмотра, тогда фон будет оставаться на месте, при смещающемся контенте.
Посмотрите демо
А как быть с маленькими экранами? Зачем на них загружать большую картинку? Это слишком расточительно с точки зрения скорости загрузки для мобильного интернета.
С помощью любого графического редактора уменьшаем физические размеры фонового изображения, например до 1200 пикселей по ширине, таким образом у нас будет два одинаковых изображения: маленькое и большое.
Обратимся к медиа-запросу:
@media only screen and (max-width: 500px) {
body {
background-image: url(photo-small.jpg);
}
}
При ширине экрана менее 500 пикселей, загрузится маленькое изображение. Не стоит делать маленькое изображение, меньше 1200 пикселей, надо учитывать, что некоторые устройства имеют маленькие физические размеры экрана, но с большим разрешением.
Адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset , для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.
Давайте отбросим лишнюю тягомотину, современные спецификации позволяют нам сделать изображения, используемые на страницах сайтов, гибкими и корректно отображающимися на экранах различных пользовательских устройств, для этого достаточно использовать всего лишь несколько свойств из обоймы CSS.
Приготовил примеры нескольких вариаций исполнения адаптивных изображений, одиночная картинка, изображения в двух и более колонках, а так же пример использования большого фонового изображения с гарантированной адаптивностью. Все варианты основаны на использовании процентных значений для свойства width (ширины) и значении auto для свойства height (высоты) изображений.
| img { width : 100% ; height : auto ; } |
img { width: 100%; height: auto; }
Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение.
Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.
|
| div.container { width : 96% ; max-width : 960px ; margin : 0 auto ; /* центрируем основной контейнер */ } img { width : 100% ; /* ширина картинки */ height : auto ; /* высота картинки */ } |
div.container { width: 96%; max-width: 960px; margin: 0 auto; /* центрируем основной контейнер */ } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ }
Обратите внимание, что элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.
Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу значение inline-block для свойства display , т.е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.
1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.
|
| img { width : 32% ; display : inline-block ; } |
img { width: 32%; display: inline-block; }
В следующем примере, мы рассмотрим вариант использования адаптивных картинок с различной расстановкой в зависимости от устройств просмотра, т.е. при просмотре на смартфонах изображения будут отображаться в одну колонку, в две колонки на планшетах, и выстраиваться в четыре колонки на больших экранах.
Для реализации задуманного, применим медиа-запросы @media , указав тип носителя, для которого будет применяться то или иное максимальное значение ширины изображений max-width .
|
/* Для небольших устройств (смартфоны) */ img { max-width: 100%; display: inline-block; } /* Для средних устройств (планшеты) */ @media (min-width: 420px) { img { max-width: 48%; } } /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) { img { max-width: 24%; } }
Всё довольно просто, неправда ли? Идея с медиа-запросами отличная, уже довольно давно и широко используемая. Показанные в примере параметры, хорошо работают именно с данным макетом, как поведут себя в других конструкциях, стоит тщательно проверять, так что...
Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.
| .container { width : 100% ; } img { width : 100% ; } |
Container { width: 100%; } img { width: 100%; }
Несмотря на то что данная техника очень проста в использовании и имеет устойчивую поддержку браузерми, следует помнить о том, что изображения всегда будут показаны в полный размер, т.е. большие, с высоким разрешением изображения показываются заполняя всё пространство, что для небольших мобильных устройств, не всегда в тему, если только картинка не используется в качестве фонового изображения.
На этом пожалуй и всё. Если вы хотите, для различных устройств, использовать отдельные изображения разного размера, используйте, хуже уж точно не будет. Знаете другие методы сделать изображения адаптивными, пишите в комментариях, обязательно рассмотрим, новое оно всегда интересно.
Одна из основных задач при адаптивной верстке - это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.
С картинками в теге img все просто: при установке ширины в процентах высота будет масштабироваться автоматически. К фоновым же изображением такой способ применить нельзя.
Данный трюк заключается в установке значения в процентах отступам (padding ) элемента. Впервые способ опубликован в старой статье блога A List Apart , однако он до сих пор хорошо работает.
Предположим, что есть фоновое изображение 800 на 450 пикселей, и нужно сделать его фоном с фиксированным соотношением сторон - 16:9. В коде ниже для отступов используется px , но все будет работать и с em . Также есть HTML5 элемент figure, для его корректной работы в старых браузерах можно использовать HTML5 shiv .
Div.column { max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ }
Div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }
Предположим, что есть большое фоновое изображение, которое отлично смотрится на десктопе. Но на мобильном устройстве оно будет слишком мелкое, поэтому правильным решением станет уменьшение ширины фона.
Например картинка шириной 800 на 200 пикселей (4:1) на маленьком экране, при ширине в 300 пикселей, должна уменьшаться до 150 пикселей (2:1). Посчитаем атрибуты height и padding-top :
На рисунке показано соотношение сторон фонового изображения при разной ширине. Наклон графика (slope) соответствует атрибуту padding-top , начальная высота (start height) - атрибуту height . В итоге получается код:
Div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fluidratio { padding-top: 10%; /* slope */ height: 120px; /* start height */ background-image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }
/* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) { $width-large: nth($large-size, 1); $width-small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height-large - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; height: $height; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } figure.fluidratio { /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); }
От автора: В этой обучающей статье мы рассмотрим простую технику создания фонового изображения, которое будет полностью растягиваться на всю ширину окна просмотра (viewport) браузера. Для этого нам понадобится CSS-свойство background-size; JavaScript не нужен.
В настоящее время довольно популярным стало использование в качестве фона огромной фотографии, которая занимает всю веб-страницу. Вот примеры нескольких сайтов, у которых установлены адаптивные целые фоновые изображения:
Если вы хотели бы добиться похожего результата в вашем следующем веб-проекте, тогда эта статья – это то, что вам нужно.
Вот наш план действий.
Используйте свойство background-size, чтобы полностью заполнить окно просмотра
CSS-свойство background-size имеет значение cover. Значение cover сообщает браузеру о том, что необходимо автоматически и пропорционально масштабировать ширину и высоту фонового изображения, чтобы они всегда были равны или были больше ширины/высоты окна просмотра.
Используйте медиа-запрос для обработки небольших фоновых изображений для мобильных устройств
Чтобы улучшить скорость загрузки страницы на маленьких экранах, мы будем использовать медиа-запрос для обработки уменьшенной версии нашего фонового изображения. Это необязательно. Эта техника будет работать и без этого. Но почему использование небольшого фонового изображения для мобильных устройств является хорошей идеей?
Изображение, которое я использовал в демо-примере, имеет разрешение 5500x3600px. Этого разрешения хватит для большинства широкоформатных компьютерных мониторов, имеющихся в настоящее время в продаже. Но ради этого придется обрабатывать файл размером 1.7MB.
Такая огромная дополнительная нагрузка только ради размещения фоновой фотографии в любом случае не принесет ничего хорошего. И, безусловно, это исключительно плохо скажется на соединениях, использующих мобильный Интернет. А также такое разрешение является излишним для устройств с маленьким экраном (подробнее на этом остановимся позже). Давайте рассмотрим весь процесс.
Для разметки потребуется только это:
Мы собираемся назначить фоновое изображение для элемента body, чтобы изображение всегда полностью занимало окно просмотра браузера.
Тем не менее, эта техника будет также работать для любого блочного элемента (например, div или form). Если ширина и высота вашего блочного элемента является «резиновой», тогда фоновое изображение всегда будет масштабироваться таким образом, чтобы занять весь контейнер.
Задаем следующие стили для элемента body:
body { /* Путь до изображения */ background-image: url(images/background-photo.jpg); /* Фоновое изображение всегда отцентрировано по вертикали и горизонтали */ background-position: center center; /* Фоновое изображение не повторяется */ background-repeat: no-repeat; /* Фоновое изображение зафиксировано в окне просмотра, поэтому оно не смещается, когда высота контента больше высоты изображения */ background-attachment: fixed; /* Вот что позволяет фоновому изображению подстраиваться под размер контейнера */ background-size: cover; /* Устанавливает фоновый цвет, который будет отображаться, пока загружается фоновое изображение */ background-color: #464646; }
body { /* Путь до изображения */ background - image : url (images / background - photo . jpg ) ; /* Фоновое изображение всегда отцентрировано по вертикали и горизонтали */ /* Фоновое изображение не повторяется */ background - repeat : no - repeat ; /* Фоновое изображение зафиксировано в окне просмотра, поэтому оно не смещается, когда высота контента больше высоты изображения */ /* Вот что позволяет фоновому изображению подстраиваться под размер контейнера */ background - size : cover ; /* Устанавливает фоновый цвет, который будет отображаться, пока загружается фоновое изображение */ background - color : #464646; |
Наиболее важная пара свойство/значение, на которую следует обратить внимание:
background-size: cover;
background - size : cover ; |
Вот, где начинается волшебство. Эта пара свойство/значение сообщает браузеру о том, что нужно масштабировать фоновое изображение пропорционально, т.е. чтобы его ширина и высота были равны или были больше, чем ширина/высота элемента (в нашем случае это элемент body).
Однако у данной пары свойство/значение есть одна проблема: если фоновое изображение меньше размеров элемента body – что произойдет на экранах с высоким разрешением и/или когда у вас огромное количество контента на странице – браузер неизбежно увеличит масштаб изображения. И, как мы знаем, когда мы увеличиваем размеры растрового изображения, качество изображения снижается (другими словами, происходит пикселизация).
Увеличение размера изображения относительно исходных размеров сказывается на качестве изображения. Помните об этом, когда будете выбирать подходящее изображение. В демо-примере используется огромная фотография размером 5500x3600px для широкоформатных мониторов, поэтому потребуется очень большой экран, чтобы произошло искажение качества. Давайте двигаться дальше. Чтобы фоновое изображение всегда было по центру окна просмотра, мы пропишем:
background-position: center center;
background - position : center center ; |
Данная запись располагает фон на координатной оси по центру окна просмотра. Далее нам нужно определить, что будет происходить, когда высота контента превышает видимую высоту окна просмотра. Когда это происходит, появляется полоса прокрутки.
В данном случае нам необходимо сделать так, чтобы фоновое изображение оставалось на исходном месте, даже когда пользователь прокручивает страницу вниз. В данной ситуации изображение либо просто закончиться при прокрутке, либо будет перемещаться по ходу прокрутки (что может сильно отвлекать пользователя). Чтобы зафиксировать фон, мы указываем для свойства background-attachment значение fixed.
background-attachment: fixed;
background - attachment : fixed ; |
В демо-примере я добавил возможность «подгрузить контент», чтобы вы могли посмотреть, что происходит при появлении полосы прокрутки в браузере, когда для свойства background-attachment задано значение fixed. Вы также можете загрузить демо-пример и поиграть со значениями свойств, отвечающих за расположение элементов (например, background-attachment и background-position), чтобы посмотреть, как это повлияет на прокрутку страницы и фоновое изображение. Остальные значения свойств сами по себе довольно понятны.
Я подробно расписал фоновые свойства, чтобы их было легче объяснить. Равнозначной будет и сокращенная запись:
body { background: url(background-photo.jpg) center center cover no-repeat fixed; }
body { background : url (background - photo . jpg ) center center cover no - repeat fixed ; |
Все, что вам необходимо сделать, это изменить значение url, чтобы указать путь до вашего фонового изображения.
Дополнительно: медиа-запрос для маленьких экранов
Для маленьких экранов я использовал программу Photoshop, чтобы пропорционально уменьшить исходное фоновое изображение до размера 768x505px, а также я воспользовался сервисом Smush.it для того, чтобы еще немного уменьшить размер. Благодаря этому размер файла уменьшился с 1741KB до 114KB. Т.е. размер изображения уменьшился на 93%.
Пожалуйста, не поймите меня неправильно, 114KB это все еще довольно много для чисто эстетического элемента дизайна. Учитывая дополнительную нагрузку в 114KB, я бы стал использовать такой файл, только если бы увидел возможность значительно улучшить опыт взаимодействия пользователя с сайтом (UX), т.к. в настоящий момент значительная доля Интернет трафика приходится на работу мобильных устройств background - image : url (images / background - photo - mobile - devices . jpg ) ;
У медиа-запроса установлено ограничение по ширине max-width: 767px, которое означает, что если окно просмотра браузера больше 767px, то будет загружаться большое фоновое изображение.
Недостаток использования данного медиа-запроса заключается в том, что если вы измените ширину окна вашего браузера, например, с 1200px до 640px (или наоборот), вы сразу же увидите момент загрузки маленького или большого фонового изображения.
Вдобавок к этому, из-за того, что некоторые устройства с маленьким экраном могут отображать большее количество пикселей – например, iPhone 5 c дисплеем retina способен отобразить разрешение 1136x640px – маленькое фоновое изображение будет пикселизовано.
Вы можете посмотреть более актуальную версию исходного кода из данной обучающей статьи на GitHub . Я могу вас предупредить только об одном: пожалуйста, используйте данную технику с осторожностью, потому что большие файлы могут серьезно повредить UX, особенно если конечный пользователь использует медленное и ненадежное Интернет соединение. Это еще одна причина, почему вам следует подобрать подходящий цвет фона, чтобы пользователь смог прочитать контент, пока фоновое изображение загружается.
