misunderstood; the scone is a quintessentially British classic.</p>
<div class="MoneyShot">
<img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones" />
<p class="ImageCaption">Incredible scones, picture from Wikipedia</p>
</div>
</div>
<p>Recipe and serving suggestions follow.</p>
<div class="Ingredients">
<h3 class="SubHeader">Ingredients</h3>
<ul>
</ul>
</div>
<div class="HowToMake">
<h3 class="SubHeader">Method</h3>
<ol class="MethodWrapper">
</ol>
</div>
</body>
</html>
Изначально веб-страницы обладают гибкостью. Если открыть страницу примера даже в теперешнем ее состоянии (без медиазапросов) и изменить размер окна браузера, станет видно, что текст будет подвергнут необходимой перекомпоновке.
А как она себя поведет на других устройствах? При полном отсутствии CSS на iPhone получится следующее изображение.
Как видите, на iPhone она отобразилась точно так же, как и обычная веб-страница. Дело в том, что изначально iOS отображает веб-страницы шириной 980 пикселов и ужимает их в области просмотра.
Область просмотра браузера в технической терминологии известна как окно просмотра (viewport). Иногда это окно соответствует размеру экрана устройства, особенно в тех случаях, когда у пользователя есть возможность изменить размеры окна браузера. Поэтому впредь при обозначении пространства, доступного для нашей веб-страницы, как правило, будет использоваться эта, более точная терминология.
Эта заранее предполагаемая проблема легко решается путем добавления в <head>-контейнер следующего фрагмента кода:
<meta name="viewport" content="width=device-width">
Фактически этот метатег с именем viewport не считается стандартным способом указания браузеру способа отображения страницы (хотя и является стандартом де-факто). В данном случае наш метатег viewport представляет собой четкое предписание «отобразить содержимое во всю ширину экрана устройства». Легче, наверное, просто показать вам действие этой строки кода на воспринимающих ее устройствах.
Отлично! Теперь тест отобразился и разлился до более естественного размера. Пойдем дальше.
Различные настройки и сочетания метатега (и стандарты, послужившие основой для версии подобных функциональных возможностей) будут рассмотрены в главе 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 пикселов. На данном этапе было бы полезно получить возможность кое-что подправить. Может быть, изменить размер