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

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

Но в 2007 году на телефонах iPhone компании Apple впервые появились по-настоящему удобные условия просмотра информации и условия доступа людей к веб-данным и работы с ними изменились навсегда.

В первом издании этой книги было отмечено, что «за 12 месяцев, с июля 2010-го по июль 2011 года, процент использования мобильных браузеров во всем мире вырос с 2,86 до 7,02».

В середине 2015 года в той же статистической системе (gs.statcounter.com) утверждалось, что данный показатель увеличился до 33,47 %. Для сравнения, в компании North America Mobile этот показатель достиг 25,86 %.

Использование мобильных устройств растет по любым показателям, а на другом краю шкалы в общую практику применения входят 27- и 30-дюймовые дисплеи. Как никогда ранее растет и разрыв между наименьшими и наибольшими экранами, на которых просматривается веб-содержимое. Благо есть решение, подходящее для постоянно расширяющейся арены браузеров и устройств. Нормальная работа сайта на множестве устройств и экранов возможна благодаря так называемому адаптивному дизайну, построенному на основе применения HTML5 и CSS3. Эта технология позволяет разметке и возможностям сайта подстраиваться под имеющееся окружение (размер экрана, тип ввода и возможности устройства или браузера).

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

Итак, вперед к неизведанному

Я надеюсь, что глава 1 поможет достичь одной из двух целей независимо от того, в новинку ли вам такие понятия, как адаптивный дизайн, HTML5 или CSS3, или вы в них неплохо разбираетесь.

Если HTML5 и CSS3 уже используются вами для адаптивной веб-разработки, эта глава позволит быстро вспомнить их основы. А если вы новичок в этом деле, воспринимайте ее в качестве своеобразного курса молодого бойца, охватывающего все с самого начала, так что данная глава пригодится всем без исключения.

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

А зачем тогда остальные девять глав? Это также станет понятно к концу главы.

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

• определение адаптивного веб-дизайна;

• способы настройки уровней поддержки браузеров;

• краткий обзор инструментальных средств и текстовых редакторов;

• создание первого адаптивного примера — простой страницы, созданной с использованием HTML5;

• важность метатега viewport;

• способ масштабирования изображений под их контейнер;

• написание медиазапросов CSS3 для создания контрольных точек дизайна;

• несовершенство нашего простого примера;

• почему мы находимся всего лишь в самом начале пути.

Определение адаптивного веб-дизайна

Понятие «адаптивный веб-дизайн» было введено Итаном Маркоттом (Ethan Marcotte) в 2010 году. В своей новаторской статье на сайте A List Apart (http://www.alistapart.com/articles/responsive-web-design/) он свел воедино три уже существовавшие на тот момент технологии (гибкий макет на основе сетки, подстраиваемые по размеру изображения и элементы мультимедиа, а также медиазапросы) в единый унифицированный подход, который он назвал адаптивным веб-дизайном.

Адаптивный веб-дизайн в кратком изложении. Адаптивный веб-дизайн является представлением веб-содержимого в наиболее удобном формате для окна просмотра и устройства, обращающегося за этим содержимым.

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

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