Эта заранее предполагаемая проблема легко решается путем добавления в <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 пикселов. На данном этапе было бы полезно получить возможность кое-что подправить. Может быть, изменить размер изображения и расположить его рядом с одной из сторон. Может быть, изменить размеры некоторых шрифтов и фоновые цвета элементов.
И здесь нам сопутствует удача, поскольку все эти функциональные возможности мы можем получить без особого труда, привязав с помощью медиазапросов CSS требуемые настройки к нашим желаниям.
Ввод медиазапросов
Как выяснилось, когда окно просмотра выходит по ширине за 600 пикселов, текущая разметка начинает казаться растянутой. Воспользуемся медиазапросами CSS3 для коррекции разметки в зависимости от ширины экрана. Медиазапросы позволяют применять конкретные CSS-правила на основе целого ряда условий (например, ширины и высоты экрана).
Не устанавливайте значения конрольных точек равными ширине популярных устройств
Понятие «контрольная точка» используется для определения точки, в которой адаптивный дизайн должен претерпеть существенные изменения.
Когда люди только начинали применять медиазапросы, зачастую считалось, что контрольные точки в дизайне должны выстраиваться именно вокруг параметров наиболее популярных из имеющихся на то время устройств. Тогда эти контрольные точки обычно выстраивались вокруг параметров iPhone (320 × 480 пикселов) и iPad (768 × 1024 пикселов).
Но их выбор оказался неудачным, а в настоящее время он рассматривается как один из наихудших. Дело в том, что, поступая таким образом, мы ориентируем дизайн на конкретный размер экрана. А нам нужен адаптивный дизайн, то есть не то представление, которое неплохо смотрится только при конкретных размерах экрана, а то, которое не привязано к размеру экрана.
Поэтому позволим определять подходящие места для контрольных точек самому содержимому и дизайну. Может быть, исходная разметка начнет терять подобающий вид при ширине 500 пикселов и более, а может быть, 800 пикселов. Где именно нужно расставить контрольные точки, должно определяться дизайном вашего проекта.
Весь диапазон медиазапросов будет рассмотрен в главе 2, в названии которой и фигурирует этот термин.
Но чтобы наш простой пример не разрастался, мы сконцентрируемся на одном типе медиазапроса, касающегося минимальной ширины. Правила CSS внутри этого типа медиазапроса применяются только в том случае, если окно просмотра имеет минимальную заданную ширину. Точная минимальная ширина может указываться с применением целого набора различных единиц измерения длины, включая проценты, em, rem и px (пиксел). В CSS медиазапрос минимальной ширины записывается следующим образом:
@media screen and (min-width: 50em) {
/* стили */
}
Директива @media сообщает браузеру о начале медиазапроса, компонент screen (применять это объявление экрана в данной ситуации технически не обязательно, но более подробно работать с ним нам придется в следующей главе) сообщает браузеру, что правила должны применяться ко всем типам экранов, и компонент and (min-width: 50em) сообщает браузеру, что правила должны действовать для всех окон просмотра, чья ширина превышает 50 em.
совет
Я считаю, что первым, кто написал следующую фразу, был Брайан Ригер (Bryan Rieger) (http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu): «Отсутствие носителя для медиазапросов фактически и является признаком первого медиазапроса».
Он имел в виду, что первыми правилами, которые нам нужно записать вне медиазапроса, должны быть базовые правила, которые мы затем будем наращивать для более соответствующих им устройств.
А пока нужно просто иметь в виду, что этот подход всего лишь сначала интеллектуально подкрепляет наименьший экран, позволяя постепенно детализировать уровни по мере того, как этого потребует дизайн.
Корректировка примера под более крупный экран. Мы уже выяснили, что наш дизайн начинает терять подобающий вид при ширине около 600 пикселов, или 37,5 rem.
Поэтому внесем в простой пример кое-что новенькое, определив разную разметку для разных размеров окна просмотра.
совет
Почти у всех браузеров текст имеет исходный размер 16 пикселов, поэтому ширину легко можно преобразовать в rem, разделив значение в пикселах на 16. Зачем нам это понадобится, мы узнаем в главе 2.
Для начала остановим чрезмерное разрастание соответствующего теме сайта изображения, удерживая его в правой части экрана. Затем можно поместить вводный текст в левую часть экрана.
После этого ниже его в левой части экрана можно расположить основную часть текста — рецепт, описывающий способ выпечки булочек, а справа в небольшом разделе, заключенном в прямоугольник, перечислить ингредиенты.