Сегодня интернет стал мобильней, чем когда-либо. Проблема всех времен и народов — размер экрана — десятилетиями висит над бедными дизайнерами, как дамоклов меч. На сегодняшний день люди входят в интернет с мобильных телефонов чаще, чем когда-либо, и ситуация все усложняется. 2% интернет-трафика поступает с устройств с системой iOS — это больше, чем трафик, проходящий через Оперу.

Выходит, двое из сотни посетителей просматривают ваш сайт с телефона. Что же можно сделать с этой проблемой? К счастью, W3C заинтересовались этим заметным потоком трафика с мобильных устройств и предложили нам инструменты для решения этой задачки. 

Цель

Нужен пример? Если у вас современный браузер, попробуйте поизменять размер окна на этом сайте. Вы заметите, что расположение колонок изменяется в зависимости от размера окна браузера (и, соответственно, размера экрана). Вот этого нам и нужно достичь.

Стратегия

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

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

Правило @media

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

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

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

@media (max-width: 700px) {
/* СЮДА ВСТАВИМ CSS-код, ПЕРЕВОДЯЩИЙ САЙТ В ОДНУ КОЛОНКУ */
}

Дальше может показаться немного запутанно, но если изначально было сделано все аккуратно, не придется много добавлять.
Например, пусть у вас было две колонки в обычном виде, #column_1 и #column_2. Сolumn_1 содержит основной контент, а в column_2 расположена вспомогательныя информация и реклама. Эта вторая колонка по сути не нужна тем, кто заходит на сайт с мобильного телефона, так что вы можете добавить в свое описание стиля следующее:

#column_2 {
display: none;
}

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

@media (min-width: 1300px) {
}

А теперь мы можем указать, как сайту вести себя при ширине экрана от 700 до 900 пикселей.

@media (max-width: 900px) and (min-width: 700px) {
}

Обратите внимание!

Эти моменты крайне важны.

• Вы можете создать скрытый div, который появляется (через display: block) только когда ширина экрана пользователя превышает определенную ширину. Это незаменимо, когда в боковой колонке содержится информация, которую хочется сохранить.
• Еще я бы предложил использовать overflow-x: scroll для области основного контента, в которых применяются таблицы или широкие медиа-элементы. Благодаря этому, никакая важная информация не будет обрезана, и при этом не появится скролл на всю страницу.
• Не забывайте, что если что-то не работает, можно применить !important в конце стиля, например: display: block !important. Исходя из того, что вы добавляете все это в конец своего CSS-файла, это не приведет к проблемам, так как нижестоящий код замещает вышестоящий.

Более подробную информацию вы сможете найти на сайте W3C.

Подготовлено по материалам статьи inserthtml.com



Комментарии