Основы работы с фоном через css

Активное обучение: реализация собственных адаптивных изображений

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

Напишите простую HTML-разметку.
Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
Используйте элемент для работы с художественно оформленной картинкой.
Обозначьте несколько разных размеров для этой картинки.
Используйте / для описания переключения при смене размеров вьюпорта

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

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

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

Давайте проверим, как отображается наша новая веб-страница при разной ширине вьюпорта. Для большего удобства вы можете воспользоваться режимом имитации девайсов в браузере Google Chrome — удобный инструмент, при котором вы словно просматриваете сайт с iPhone, iPad и т. п.

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

/* разместите этот код последним */

@media (max-width: 480px) {
    .menu li a {
        padding-left: 5px;
        padding-right: 5px;
    }
    .menu {
        text-align: center; /* центрируем меню — так смотрится лучше */
    }
}

За счет сжатия отступов все пункты теперь помещаются в одну строку даже на девайсах с маленькой шириной экрана в 320 пикселей.

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

/* разместите этот код _над_ прошлым медиазапросом */

@media (max-width: 980px) {
    .tour-card {
        float: none;
        display: inline-block;
    }
    #tour {
        text-align: center;
    }
}

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

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

Третья (и последняя) правка адаптивности — это блок подписки на новости. Мы увеличим расстояние между строками текста, добавив свойство элементу (не используя медиазапрос, т. е. разместим это правило среди обычных стилей). А также мы адаптируем стиль кнопки для экранов менее 480 пикселей, сделав ее ширину такой же, как ширина поля , и добавив небольшой отступ сверху.

/* разместите этот код в разделе Subscribe */

#subscribe .pitch p {
    line-height: 1.6;
}

/* а этот — в теле медиазапроса для max-width: 480px */

#subscribe button {
    width: 232px;
    margin-top: 20px;
}

СSS3 Свойство background-size

Пример

Укажите размер фонового изображения с «auto» и в пикселях:

#example1 background: url(mountain.jpg); background-repeat: no-repeat; background-size: auto; >

#example2 background: url(mountain.jpg); background-repeat: no-repeat; background-size: 300px 100px;>

Определение и использование

Свойство background-size определяет размер фоновых изображений.

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

Значение по умолчанию:	auto
Унаследованный:	нет
Анимируемый:	да. Прочитать о animatable Редактор кода
Версия:	CSS3
JavaScript синтаксис:	object.style.backgroundSize=»60px 120px» Редактор кода

Поддержка браузеров

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

Числа, за которыми следуют -webkit-, -moz-, или -o- указывают первую версию, которая работала с префиксом.

Свойство
background-size	4.01.0 -webkit-	9.0	4.03.6 -moz-	4.13.0 -webkit-	10.510.0 -o-

Значение свойств

Значение	Описание	Воспроизвести
auto	Значение по умолчанию. Фоновое изображение отображается в исходном размере	Воспроизвести »
length	Задает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе имеет значение quot;auto». Прочитать Единицы длинЫ	Воспроизвести »
percentage	Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе имеет значение «auto»	Воспроизвести »
cover	Измените размер фонового изображения, чтобы покрыть весь контейнер, даже если он должен растянуть изображение или немного отрезать один из краев	Воспроизвести »
contain	Измените размер фонового изображения, чтобы убедиться, что изображение полностью видно	Воспроизвести »
initial	Задает этому свойству значение индекса. Прочитать о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитать о inherit

Пример

Укажите размер фонового изображения в процентах:

#example1 background: url(mountain.jpg); background-repeat: no-repeat; background-size: 100% 100%;>

#example2 background: url(mountain.jpg); background-repeat: no-repeat; background-size: 75% 50%;>

Пример

Укажите размер фонового изображения с помощью «cover»:

Пример

Укажите размер фонового изображения с помощью «contain»:

Пример

Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с «contain», и второе фоновое изображение с& quot;cover»:

Свойство CSS background-repeat

Это свойство определяет нужно ли повторять фоновое изображение (если, конечно, оно задано) и как это делать.

В качестве значений принимает следующие ключевые слова:

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

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

Частичное решение: делаем всё гибким

Конечно, это не идеальный способ, но он устраняет большую часть проблем с адаптивной вёрсткой.

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой вёрстки:

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

Однако если они вам нужны, обратите внимание на следующие техники:

Hiding and Revealing Portions of Images;
Creating Sliding Composite Images;
Foreground Images That Scale With the Layout.

Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».

Weekend Offer для фронтенд-разработчиков
19–20 марта, Онлайн, Беcплатно

tproger.ru

События и курсы на tproger.ru

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

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

Элемент содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Сетка и колонки

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

Блоки живут не сами по себе, а как бы в таблицах. Вы говорите Бутстрапу: «Создай мне контейнер для блока, в контейнере — строку, внутри строки — колонку, а внутрь колонки — положи этот текст». Сейчас это выглядит странно, но позже вы привыкнете.

Строка заполняется ячейками слева направо. Когда кончается строка, можно создать новую строку и снова заполнить её ячейками разной ширины. Ширина ячеек выражается в колонках. Ячейка шириной на весь экран будет иметь ширину 12 колонок, на пол-экрана — 6 колонок. Чтобы разбить экран на три части по горизонтали, нужно 3 ячейки шириной по 4 колонки. Чтобы сделать сетку, как у обычного трёхколоночного сайта, попробуйте три ячейки: 2 колонки, 8 колонок, 2 колонки.

Можно сказать Бутстрапу: «Когда экран маленький, эту колонку выводи на всю ширину, а ту вообще прячь». Например, у нас в левой колонке было меню сайта, в центральной — основной текст, а в правой — всякие вспомогательные ссылки. Тогда говорим левой колонке на мобилке вывестись на всю ширину, основной колонке — тоже на всю ширину, а правой — скрыться. Получится мобильная версия сайта.

И так можно долго куражиться. Если интересно, прочитайте документацию по сеткам Бутстрапа — там всё понятно по картинкам.

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

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

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

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

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

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

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

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

Почему адаптивные изображения?

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

Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть посмотреть демо-пример и найти исходный код на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:

Содержимому тега задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.
Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) всё равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.
Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.

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

Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как art direction problem.

Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется resolution switching problem — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали векторную графику, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.

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

Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше.

Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. Технологии отзывчивых изображений были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (resolution switching), или разные изображения с отдельными областями основного изображения (art direction).

Примечание: Новые возможности обсуждаются в статье — // — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).

Как задать цвет и изображение фона сайта

Для задания цвета фона используют свойство background-color, оно принимает значения в шестнадцатеричном формате цвета, в формате RGB, задание цвета при помощи ключевых слов.

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

Теперь поговорим о том, как регулировать повторение фонового изображения, как растянуть его на весь экран и т.д. Свойство, которое отвечает за повтор фона, называется background-repeat. Оно принимает четыре значения. В качестве значения по умолчанию принимается repeat (повторять по вертикали и горизонтали). Три других значения:

repeat-x — повторяет изображение по горизонтали
repeat-y — повторяет изображение по вертикали
no-repeat — не повторяет изображение совсем

Для задания размера фонового изображения сайта используют свойство background-size, оно принимает значения в процентах, пикселях и слово auto. Имеет два значения через пробел. Первое значение отвечает за растяжение по горизонтали, второе по вертикали. Если первое значение задано (например, 100%), а второе значение выставлено auto, то фон по горизонтали растянется на весь размер блока, а по вертикали подгоняет высоту для данной ширины. Есть еще два значения для этого свойства (cover и contain). Cover изменяет размеры изображения так, чтобы блок был полностью закрыт картинкой, а contain так, чтобы картинка поместилась в блок целиком. Cover и contain задаются по одному, через пробел уже ничего писать не нужно.

Пример. Зададим цвет фона, его изображение без повтора и растянем его по ширине и высоте:

Положение фонового изображения, background-position

Немного подробнее остановимся на работе с фоновым изображением, которое не нужно повторять. Для регулирования нахождения этого изображения внутри блока, которому мы задаем фон, используется CSS-свойство background-position. Это свойство принимает два значения через пробел. Первое определяет положение по оси x (горизонтали), второе по оси y (вертикали).

Единицы измерения этих двух величин проценты и пиксели. Еще они принимают значения top, bottom, left, right, center. Значения для оси x, естественно, left, right, center. Значения для оси y — top, bottom, center. Единицы измерения, значения, пиксели и проценты можно комбинировать между собой в произвольном формате. В примере ниже зададим позиции для фонового изображения. В первом случае будет изображение по центру в процентах. Во втором случае изображение в правом нижнем углу блока. В третьем случает изображение сдвинуто на 50 пикселей слева и на 100 пикселей сверху. Пример:

Фиксим фонового изображения, background-attachment

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

Для фиксации фона используется css-свойство background-attachement. Оно принимает два значения, scroll — значение по умолчанию, прокрутка вместе со всем остальным содержимым, fixed — фон остается на месте при прокрутке.

background-repeat – повтор фонового изображения

Свойство определяет должно ли повторяться фоновое изображение, а если да, то как.

Значения этого свойства (помимо обычных значений вроде ):

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

Также имеется синтаксис с двумя значениями (первое – по горизонтали, второе – по вертикали):

Синтаксис с одним значением – это просто сокращение синтаксиса с двумя значениями. Например, значение вычисляется как .

Блок с контентом поверх фонового изображения

Подобные блоки привлекают внимание. Фоном идёт картинка, а поверх неё текст

Давайте разбираться, как такое сделать.

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

Однако мы не всегда знаем заранее, сколько контента будет внутри блока — не изменят ли потом его содержимое. Могут поменять заголовок, сделать его больше на две-три строки — и тогда всё сломается. Поэтому фон нужно делать адаптивным. Итак, к коду.

Создаём простую html-разметку:

Главное у нас снова в CSS:

Чтобы даже при увеличении текста ничего не сломалось — применяем внутренний отступ (padding). Таким образом уходим от фиксированных размеров: контент можно менять, при этом блок и его фон будут подстраиваться.
Устанавливаем background-repeat в no-repeat

По умолчанию применяется repeat, но с ним фоновая картинка повторяется, пока не заполнит собой блок, а нам такого не нужно.
Задаём background-position: center — выравниваем картинку по центру контейнера (как по вертикали, так и по горизонтали).
А теперь самое важное — масштабируем фон. Задаём свойству background-size значением cover

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

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок

Запасной вариант

Браузеры Internet Explorer версий 6, 7 и 8 не поддерживают media queries и трансформации, так что наше изображение окажется не там, где нужно. Есть обходные пути и специфические свойства, которые могут решить эту проблему, но, на наш взгляд, зачастую они вызывают больше проблем, чем решают, например, увеличивают ширину страницы, снижают производительность, добавляют проблем при сопровождении и т. д.

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

img.ri
{
	position: absolute;
	max-width: 80%;
	top: 10%;
	left: 10%;
	border-radius: 3px;
	box-shadow:  3px 6px rgba(,,,.9);
}

Свойства border-radius и box-shadow тоже не поддерживаются старыми версиями браузера Internet Explorer, но при этом не теряются основные черты изображения.

Добавление фона и других картинок в background

Если мы добавим фон при помощи background-color перед background-image, картинка перекроет фон и ничего не произойдет. То же самое и наоборот: если мы поставим color после картинки, будет только один цветной фон. Чтобы сделать фон, нужно в background прописать фон, и через запятую картинку:

width: 100%;
height: 300px;
background: linear-gradient(135deg, rgba(177, 234, 77, 0.4), rgba(69, 149, 34, 0.4)),
   url("landscape_result.jpg")center/cover fixed;

Эффекты смешивания blеnd-mode

В зависимости от порядка фоновых изображений, используем background-blend-mode. Разница между background-blend-mode и mix-blend-mode в том, что первый определяет режим смешивания изображения с каждым фоновым слоем, а второй смешивает цветной фон между сложенными фонами элементами HTML.

Теперь на примере: смешиваем при помощи background-blend-mode:

width: 100%;
height: 300px;
background: linear-gradient(135deg, rgba(177, 234, 77, 0.4), rgba(69, 149, 34, 0.4)),
   url("picture.jpg")center/cover fixed;
background-blend-mode: color;

Если мы применим mix-blend-mode: color к изображениям, то ничего не произойдет:

Но если мы добавим надпись на изображение, то mix-blend-mode нужно применить к тексту, и получим смешивание (см. «Цветной текст на изображение«):

<style>
.element {
width: 100%;
height: 300px;
background:linear-gradient(135deg, rgba(177, 234, 77, 0.4), rgba(69, 149, 34, 0.4)),url("picture.jpg")center/cover fixed;
  background-blend-mode: darken;	
}
.element h2 {
	color:  #0e7a02;
	background: linear-gradient(45deg,  #0062ff 40% ,  #f5cbcb 60% );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
    mix-blend-mode: multiply;
}  
</style>
<div class = "element" >
	 <h2 id = "text"> Blend-mode </h2>
 </div>

Свойство CSS background-clip

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

В качестве значений используются следующие ключевые слова:

(значение по умолчанию) — фон выступает до внешнего края границы (border) элемента.
— фон выступает до внешнего края поля отступа (padding) элемента.
— фон не выступает за пределы области контента элемента.

Сравните свойства CSS background-clip и background-origin на примерах.

Мedia query и viewport в адаптивном дизайне

Для того чтобы сообщить браузеру как отобразить размеры страницы и изменить ее масштаб используется метатег viewport. Данный метатег прописывается в <head> сайта. Он позволяет разработчикам установить ширину экрана для устройств, которая прописана в css.

Записывается мета тег viewport так:

XHTML

1	<meta name=»viewport»content=»name=value, name=value» />

Рекомендуется записывать следующим образом:

XHTML

1	<meta name=»viewport»content=»width=device-width, initial-scale=1.0″ />

width=device-width — означает что ширина страницы сайта устанавливается в соответствие ширине экрана устройства.
initial-scale=1.0 — данный атрибут скажет браузеру установить соответствие масштаба 1:1 для пикселей, что означает не масштабировать.

Слева без мета-тега, справа с использованием мета-тега viewport.

Также для мета-тега могут устанавливаться другие атрибуты и параметры.

Media Queries

В разработке адаптивных сайтов главную роль играют css3 media queries (медиа — запросы). Медиа – запросы включают в себя медиа — тип (принтеры, смартфоны, экраны, телевизоры, проекторы и др.) и условия, которое может принимать в свою очередь истину или ложь (true, false). В зависимости от того верный ли медиа — тип и выполняется ли условие будут применяться различные стили css. Если будет верно, то будут применяться те стили, которые прописаны в этом медиа – запросе, если же будет ложным, то будут применяться обычные стили css.

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

Записывается следующим образом:

CSS

@media screen and (max-width: 1000px) {
.class {
свойство: значение;
}
}

1
2
3
4
5

@media screen and (max-width: 1000px) {

.class {

свойствозначение;

}

@media – медиа – запрос;
screen – медиа – тип (также называют тип носителя);
max-width: 1000px – условие, которое должно выполняться (в нашем случае стили будут применяться, если ширина окна меньше ширины 1000px);
.class – прописываются соответствующие селекторы (классы, id) в которых свойствам задаются новые значения.

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

max-width: width — означает, что если ширина окна браузера меньше заданной ширины, то выполняется условие и применяются соответствующие стили (пример: max-width: 768px, означает, что если ширина окна браузера меньше 768px то следует использовать стили, указанные в медиа — запросе).
min-width: width — означает, что если ширина окна браузера больше заданной ширины, то условие выполняется, и применяются указанные стили в запросе (пример: min-width: 480px).

Но также могут использоваться и другие функции: color, device-width, grid, height, orientation: landscape, orientation: portrait, resolution и другие.

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

320px — мобильные
480px — мобильные
768px — планшеты
1024px — планшеты, нетбуки
1280px и более — персональные компьютеры.

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

В медиа – запросах также применяются и логические операторы такие как:

and – логическое И, применяется для объединения нескольких условий (пример: @media print and (color) { … }).
not – логическое НЕ, применяется для отрицания условия (пример: @media not all and (color) { … }).
only – применяется для старых браузеров, не поддерживающих медиа — запросы (пример: @media only screen and (max-width: 1300px) { … }).

Media queries прописываются в конце файла стилей, после всех основных стилей css.

Опциональное отображение контента

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

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

используется для объектов, которые нужно спрятать.

Пример:

Вот наша разметка:

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

style.css (основной):

Теперь прячем колонки и показываем ссылки:

mobile.css (упрощенный):

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

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

Адаптированный перевод статьи «Responsive Web Design: What It Is And How To Use It»

background-size – масштабирование фона

Свойство масштабирует фоновое изображение согласно заданным размерам. По умолчанию оно имеет значение .

Пример синтаксиса для явного указания размеров фона:

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

1. Ключевые слова: (по умолчанию), и .

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

2. Одно значение. При указании только одного значения (например, ), оно указывает ширину, а высота в этом имеет значение .

В задавать размеры можно используя любые единицы измерения: , , , , и т.д.

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