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

Цель

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

Стратегия 

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

Для начала нужно создать обычный сайт. У него может быть гибкая или жесткая разметка, это не важно. Теперь попробуйте изменить размер окна браузера с этим прекрасным сайтом. При определенном разрешении, в зависимости от дизайна, вы получите никому не нужную горизонтальную полосу прокрутки. В другом случае у Вас не будет горизонтальной полосы прокрутки, но в какой-то момент содержимое станет настолько сжатым, что у Вас останется буквально одно слово на строку. Наш основной инструмент для борьбы с этим — выбор типа экрана.

Правило @media 

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

Для этого урока мы будем вызывать @media в основном файле стилей, что, на наш взгляд, лучше в такой ситуации. Это уменьшит время загрузки сайта за счет уменьшения количества запросов HTTP.

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

@media (max-width: 700px) {
/* Поместите здесь код CSS, чтобы у веб-сайта был один столбец */
}

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

#column_2 {
     display: none;
}

Таким образом, если вы поместили этот код в свойства media, блок column_2 не будет виден на небольших экранах, на сайте будет только один столбец.

Еще можно добавить минимальную ширину, так что ширина блока контента и бокового столбца будут увеличиваться, когда окно большого размера, например, больше, чем 1300 пикселей. Это лучше подходит для веб-сайтов с жесткой разметкой, а не с гибкими столбцами.

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

Также вы можете задать, что произойдет при ширине экрана от 700 до 900 пикселей:

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

Еще советы 

Следующее очень важно:

• На сайте может быть спрятанный блок, который появляется с помощью свойства display: block, только если у пользователя размер окна меньше заданного. Это удобно, если в боковом столбце есть информация, которую нужно сохранить на сайте.
• Мы бы советовали применить свойство overflow-x: scroll к области содержимого, например, такой как .entry-content, в которой есть таблицы или другие широкие элементы. Таким образом ничего важного не обрежется. Хотя и не понадобиться использовать прокрутку на всей странице.
• Не забывайте, если что-то не работает, можно использовать объявление !important в конце стилей, например display: block !important. Если это добавлено в конце файла CSS, проблем быть не должно, так как код CSS, расположенный ниже, переписывает код CSS, расположенный выше.

Мета тег для iOS и Android 

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

<meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" />

Поддержка 

Правила @media широко поддерживаются современными браузерами и даже браузером Internet Explorer, начиная с 9 версии.

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также: