Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Увы! Весьма привлекательное, но довольно крупное изображение (шириной 2000 пикселов (px)) заставило страницу показать лишь часть картинки. Нужно исправить положение. Можно, конечно, задать с помощью CSS фиксированную ширину изображения, но перед нами стоит несколько иная задача: мы хотим, чтобы изображение масштабировалось под различные размеры экрана.

Например, на взятом нами для примера устройстве iPhone ширина составляет 320 пикселов, следовательно, для этого изображения можно установить ширину 320 пикселов, но что произойдет, если пользователь повернет экран? Окно просмотра теперь будет шириной не 320, а 480 пикселов. Нам повезло, поскольку получить подстраиваемые изображения, изменяющие масштаб под доступную ширину своего контейнера, можно с помощью всего лишь одной строчки кода CSS.

Теперь я собираюсь создать файл css/styles.css, ссылку на который дам в заголовке HTML-страницы.

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

img {

max-width: 100%;

}

Теперь после обновления страницы мы увидим что-то больше соответствующее нашим ожиданиям.

Правило, на котором основано свойство max-width, предполагает, что максимальная ширина всех изображений должна составлять 100 % их ширины (то есть они должны расширяться не более чем до 100 % своего размера). Когда содержащий изображения элемент (такой как body или div, внутри которого они находятся) меньше действительной ширины изображения, масштаб изображений будет просто подстроен, чтобы максимально занять доступное пространство.

А почему бы просто не воспользоваться свойством width: 100%?

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

Замечательно. Теперь все располагается в соответствии с ожиданиями. Независимо от размера окна просмотра ничто теперь не выходит за границы страницы по горизонтали.

Но если посмотреть на страницу в более крупных окнах просмотра, основные стили как в прямом, так и в переносном смысле начинают восприниматься растянутыми. Взгляните на страницу примера при размере окна просмотра, составля­ющем около 1400 пикселов.

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

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

Ввод медиазапросов

Как выяснилось, когда окно просмотра выходит по ширине за 600 пикселов, текущая разметка начинает казаться растянутой. Воспользуемся медиазапросами CSS3 для коррекции разметки в зависимости от ширины экрана. Медиазапросы позволяют применять конкретные CSS-правила на основе целого ряда условий (например, ширины и высоты экрана).

Не устанавливайте значения конрольных точек равными ширине популярных устройств

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

Когда люди только начинали применять медиазапросы, зачастую считалось, что контрольные точки в дизайне должны выстраиваться именно вокруг параметров наиболее популярных из имеющихся на то время устройств. Тогда эти контрольные точки обычно выстраивались вокруг параметров iPhone (320 × 480 пикселов) и iPad (768 × 1024 пикселов).