В каких браузерах работает?

Для чего используется?

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

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

Как правильно задавать?

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

Логические операторы с примерами использования в коде

Союз, который предназначен для объединения разных условий. Его логическое значение - "и" . Ниже представлен пример, который формирует стилевое оформление для цветных носителей.

@ media all and (color) { ... }

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

@ media all and (not handheld) { ... }

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

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

@ media only all and (not handheld) { ... }

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

@ media all and (orientation: landscape) , all and (min- width: 480px) { ... }

Представленный пример определяет оформление для устройств с альбомной ориентацией страниц или для тех аппаратов, у которых минимальная ширина экрана 480 пикселей.

Медиа-функции

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

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

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Устанавливает приемлемое соотношение показателя высоты и ширины активной области устройства, где будет производится вывод содержимого веб-документа. Эта функция справедлива для таких носителей, как смартфон, принтер, проектор, экран и телевизор. Значение записываются в числовом формате. Разделителем между высотой и шириной служит обычный слеш (/).

color (min-color, max-color)

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

@ media screen and (min- color: 3 ) { /* Минимум 512 цветов */ body { background: #ccc; } }

color-index (min-color-index, max-color-index)

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

@ media all and (min- color- index: 256 ) { ... }

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Данная функция создана для определения соотношения экрана устройства, для которого составлялось оформление. Для этого достаточно указать два числа, которые соответствуют высоте и ширине экрана. Эти два значения должны разделятся между собой слешем (/). Ниже показан пример для девайсов с соотношением 16:9 и более

@ media screen and (min- device- aspect- ratio: 16 / 9 ) { ... }

device-height (min-device-height, max-device-height)

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

device-width (min-device-width, max-device-width)

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

< html> < head> < meta charset= "utf-8" > < title> device- width < style> div { padding: 10px; background: #e8bfad; margin: auto; } @ media screen and (min- device- width: 1600px) { div { width: 1500px; } } @ media screen and (device- width: 1280px) { div { width: 1100px; } } @ media screen and (device- width: 1024px) { div { width: 980px; } } < body> < div> Очень интересная информация для примера бла бла бла и тому подобное.

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

< html> < head> < meta charset= "utf-8" > < title> grid < style> @ media handheld and (grid) and (max- width: 15em) { body { font- size: 2em; } } < body> < p> Текст, который будет считываться с допотопного устройства.

height (min-height, max-height)

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

monochrome (min-monochrome, max-monochrome)

Определяет показатель монохромности устройства. Это позволяет для черно-белого дисплея составить более простое в цветовом плане оформление. В качестве значения функции выступают обычные числа, которые сообщают нагрузку бит на 1 пиксель. Чтобы было более понятно, при укаании числа 8 будет осуществляться поиск устройства, которое сможет распозновать 256 оттенков необходимого цвета. К примеру,

@ media print and (monochrome) { body { font- family: Times, "Times New Roman" , serif; } h1, h2, p { color: black; } } @ media print and (color) { body { font- family: Arial, Verdana, sans- serif; } h1, h2, p { color: #556b2f; } }

orientation

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

@ media screen and (orientation: landscape) { #logo { background: url(logo1.png) no-repeat; } } @ media screen and (orientation: portrait) { #logo { background: url(logo2.png) no-repeat; } }

resolution (min-resolution, max-resolution)

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

@ media print and (min- resolution: 300dpi) { ... }

Этпа функция предназначена только для работы с телевизорами. Таким образом можно определить способ считывания информации данным устройством. Вообще, существует 2 способа:

1. Первый метод называется череcстрочный (interlace ) - упрощенный способ считывания информации по которому сначала выводятся четные строчки кадра, а затем не четные.
2. Прогрессивный (progressive ) метод работает по сложному и выводит полную информацию и сразу.

width (min-width, max-width)

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

< html> < head> < meta charset= "utf-8" > < title> Ширина страницы < style> body { background: #eee; } @ media screen and (max- width: 980px) { body { background: #fc0; } } < body> < p> Текст, который не имеет никакого смысла и написан для примера. Такие тексты называют рыбными.

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

Например, за ширину окна конкретного девайса: настольного монитора, смартфона или планшета, а в случае с последними двумя также и за ориентацию в пространстве (альбомная или книжная или по-буржуйски landscape и portrait).

Принцип действия медиа-запросов

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

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

В самом простом виде медиа-запрос какбэ говорит: «Если окно браузера не более такого-то размера (задано в пикселях), то показывать сайт так-то и так-то… ».

@media screen and (max-width: 1000px) {
#content {
width: 75%;
float: left;
}
#sidebar {
width: 25%;
float: right;
}
}

Здесь медиа-запрос говорит, что если ширина экрана не более 1000 пикселей, то ширина основного блока (content) составит 75%, а ширина боковой колонки (sidebar) будет 25%. Надеюсь, все помнят, что в адаптивной верстке используется принцип «резиновой» разметки, поэтому все размеры в %, а не в пикселях.

Синтаксис медиа-запросов

Обратите внимание на синтаксис. Медиа-запрос - это типичный набор правил и заключен в фигурные скобки. Но в отличие от обычных правил CSS, в него могут входить другие наборы правил, также заключенные в фигурные скобки, причем друг от друга они никакими знаками не отделяются. Такой себе своеобразный вложенный дополнительный набор правил а ля «все в одном».

Позвольте, но ведь есть и гораздо меньшие устройства, как с этим быть? Очень просто! Пишем еще один медиа-запрос:

@media screen and (max-width: 480px) {
#content {
width: 100%;
float: none;
}
#sidebar {
width: 100%;
float: none;
}
}

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

Также очень легко можно настроить стили для отображения сайта в книжной или альбомной ориентации экрана. Например:

@media screen and (max-width: 320px) and (orientation: portrait) {
#content {
width: 75%;
float: none;
}
#sidebar {
width: 25%;
float: none;
}
}

@media screen and (max-width: 480px) and (orientation: landscape) {
#content {
width: 80%;
float: none;
}
#sidebar {
width: 20%;
float: none;
}
}

Эти два медиа-запроса говорят следующее: «Если экран не более 320 пикселей и расположен вертикально, то ширина основного блока составит 75%, а боковой колонки 25%. А если ширина не более 480 пикселей и расположение горизонтальное, то соответственно 80% и 20%.

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

Кроме того, в медиа-запросе можно устанавливать диапазон ширины экрана от минимального до максимального:

@media screen and (min-width: 200px) and (max-width: 480px) {
#content {
width: 80%;
float: none;
}
#sidebar {
width: 20%;
float: none;
}
}

Данная запись говорит, что набор правил этого медиа-запроса будет работать на устройствах (или при размере окна браузера настольного монитора) от 200 до 480 пикселей. Если будет больше или меньше, то правила не сработают. Иногда удобнее задавать именно диапазон действия медиа-запроса.

Характеристики медиа-запросов

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

• height - высота области просмотра;
• device-width - ширина поверхности, на которой происходит просмотр (т.е. непосредственно ширина экрана конкретного девайса);
• device-height - высота поверхности, на которой происходит просмотр;
• orientation - ориентация экрана устройства (книжная или альбомная);
• aspect-ratio - соотношение ширины и высоты в зависимости от ширины и высоты области просмотра. Например, широкоэкранный дисплей с соотношением сторон 16:9 может быть указан, как aspect-ratio: 16/9;
• color - количество бит на каждый из цветовых компонентов. Например, min-color: 16 будет означать, что экран конкретного устройства имеет 16-битную глубину цвета;
• и др.

На практике чаще всего используется только значение ширины области просмотра - width . Остальные характеристики пока еще экзотика. Есть некоторая разница между width и device-width . Об этом я, пожалуй, напишу отдельный пост, чтобы не перегружать тему. Скажу лишь, что использование device-width бывает полезным, когда ориентируешься на конкретный девайс. Фишка тут вот в чем:

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

В результате, если вы в медиа-запросе зададите набор правил @media screen and (max-width: 480px) , используя простой width , то на смартфоне все равно увидите сайт так, словно он просматривается на большом мониторе, только все будет очень мелким.

Происходит такая нестыковка как раз по причине «запаса» браузера мобильного устройства. Чтобы этого не случилось, нужно использовать в медиа-запросе не просто width , а именно device-width . Либо применять такую штуку как мета-тег viewport , но об этом в следующий раз.

Где лучше всего размещать медиа-запросы?

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

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

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

Как изменить html разметку в медиа-запросе

Нет ничего проще! Обычно медиа-запросы размещаются в том же файле стилей CSS, что и остальные правила, но в самом конце. Иногда их выносят в отдельный файл.

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

На этом по медиа-запросам все. Демо-сайт в качестве примера будет разобран в одной из ближайших статей. Так что оставайтесь на связи! И пишите вопросы в комментариях.

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

Медиа для разных типов устройств

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

@media print { ... }

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

@media screen, print { ... }

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

Узконаправленные @media

Media features описывают некие характеристики определенного user agent , устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь) будет расположено над элементами:

@media (hover: hover) { ... }

Many media features are range features , which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser"s viewport width is equal to or narrower than 12,450px:

@media (max-width: 12450px) { ... }

If you create a media feature query without specifying a value, the nested styles will be used as long as the feature"s value is non-zero. For example, this CSS will apply to any device with a color screen:

@media (color) { ... }

If a feature doesn"t apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:

@media speech and (aspect-ratio: 11/5) { ... }

For more media feature examples, please see the for each specific feature.

Создание комплексных медиа запросов

Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators come in: not , and , and only . Furthermore, you can combine multiple media queries into a comma-separated list ; this allows you to apply the same styles in different situations.

In the previous example, we"ve already seen the and operator used to group a media type with a media feature . The and operator can also combine multiple media features into a single media query. The not operator, meanwhile, negates a media query, basically reversing its normal meaning. The only operator prevents older browsers from applying the styles.

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

and

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

@media (min-width: 30em) and (orientation: landscape) { ... }

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

@media screen and (min-width: 30em) and (orientation: landscape) { ... }

comma-separated lists

You can use a comma-separated list to apply styles when the user"s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user"s device has either a minimum height of 680px or is a screen device in portrait mode:

@media (min-height: 680px), screen and (orientation: portrait) { ... }

Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

not

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can"t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query.

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

Давайте сразу разберём пример медиа-запроса :

body {
font-size: 9pt;
}
}

Данный код означает следующее: "Если ширина окна браузера 768px, то применить стили, указанные в фигурных скобках ". Чтобы лучше понять, как это работает, напишите вот такой код:

Откройте этот код в браузере и обратите внимание на размер текста. Теперь начните уменьшать ширину окна браузера, и когда она достигнет 768px , то текст заметно уменьшится. Вот это и есть адаптивная вёрстка и работа медиа-запросов в CSS .

Безусловно, таких медиа-запросов может быть очень много, а внутри них может быть далеко не один селектор body , а сколько угодно самых разных селекторов.

Так же есть и другие параметры, такие как min-width , который будет срабатывать при указанной ширине и больше. Аналогичные параметры max-height и min-height , отвечающие за высоту. Так же можно комбинировать разные параметры через and :

@media screen and (max-width: 768px) and (max-height: 300px) {
body {
font-size: 9pt;
}
}

В данном случае стили будут подключаться только при ширине меньше, либо равной 768px и при высоте меньше, либо равной 300px .

Что касается практики, то могу смело сказать, что в 95% случаях используется лишь один max-width . Иногда ещё и min-width . И ещё раз повторяю, что есть и другие медиа-запросы в CSS , но забивать ими Вашу голову не буду. Но если очень хочется, то их можно посмотреть в справочнике.

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

Немного теории

Итак, для чего они вообще нужны, эти медиа-запросы? Они позволяют изменить стили каким-то элементам при условии изменения ширины окна. Это как с псевдоклассом hover – он применяет стили к элементу, на который наведен курсор. То есть событие – наведение курсора. Медиа-запросы делают то же самое, только для них событие – изменение ширины экрана. Все, я думаю вам понятно.

Как они пишутся

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

@media screen and(max-width: 1000px){ Стили… }

Давайте разберемся подробнее:
@media – собственно, эта приставка в начале и указывает на то, что мы пишем медиа-запрос.
Screen – тип носителя. Тут мы указываем screen, потому что это означает экран монитора (или мобильного устройства). Поскольку мы адаптируем сайт под эти устройства, то нам достаточно указать этот тип, но есть и другие.
And – ключевое логическое слово И. Означает, что после этого идет какое-то условие.
(max-width: 1000px) – само условие. Если ширина окна будет меньше 1000 пикселей, то условие срабатывает и к странице применяются те стили, что будут описаны далее.

Смотрим на примере

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

Статья

Текст статьи

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

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

Картинку уводим влево, а текст будет обтекать ее справа с небольшим отступом. Вот так это у меня выглядит:

Я просто добавил много случайного текста в абзацы, чтобы все было больше похоже на реальную статью. Это внешний вид статьи при ширине примерно 800 пикселей. Сейчас все смотрится вполне неплохо, но давайте мы еще уменьшим ширину окна, до 700 пикселей, например:

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

Важное условие работы! Перед тем, как начинать реализовывать адаптивность, нужно в html в тег head вставить вот такую строчку кода:

Все, теперь все будет работать.

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

@media screen and (max-width: 700px){ img{ float: none; margin: 0 auto; display: block; } }

Вот и все, теперь вот так вот красиво выглядит наша статья на расширении 700 пикселей.

Еще один адаптивный запрос

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

Примерно это начинает происходить на пятистах пикселях, поэтому давайте добавим на этой отметке еще один запрос:

@media screen and (max-width: 500px){ img{ width: 80%; } }

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

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

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