Как можно перевести windows

Руководство веб-дизайнера по CSS3: Медиа-запросы

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

1. Руководство веб-дизайнера по CSS3: Глава 0, 14 сентября 2010 г.
2. Руководство веб-дизайнера по CSS3: часть первая, 21 сентября 2010 г.
3. Руководство веб-дизайнера по CSS3: Медиа-запросы 5/10/2010
4. Руководство веб-дизайнера по CSS3: селекторы 12.10.2010
5. Руководство веб-дизайнера по CSS3: Типографика 19.10.2010
6. Шрифты и Интернет вчера, сегодня и завтра 18.3.2011

Наклейки:

Что такое медиа-запросы

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

Самый простой Media Query, который, я уверен, вы все когда-то использовали, — это стиль печати.

Обратите внимание на атрибут «media», где мы указываем, что стиль должен применяться только при печати страницы.

Этот простой принцип значительно расширяется с помощью Media Queries, поэтому мы можем ввести в качестве значения «media» разрешение устройства, ширину области просмотра, расположение экрана в альбомной или портретной ориентации и т. д.

Давайте взглянем на несколько примеров.

Мы можем настроить наш веб-сайт для отдельных устройств в отдельных таблицах стилей.

Конечно, мы также можем использовать медиазапросы с CSS:

Для чего я буду его использовать?

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

Пара номеров для мобильных устройств

• В мире насчитывается 5 миллиардов мобильных телефонов, например, в Африке больше людей имеют мобильный телефон, чем доступ к электричеству.
• Amazon заработала 1 миллиард долларов только на мобильных покупках.
• Пользователи Facebook, которые также используют мобильное устройство для доступа, в 2 раза активнее других (кстати, 150 миллионов из 500 миллионов пользователей FB используют мобильный доступ).
• Во всем мире 530 миллионов пользователей выходят в Интернет через мобильные устройства, что составляет примерно четверть от 1,9 миллиарда пользователей Интернета.
• Аналитики Gartner прогнозируют, что в 2013 году больше людей будут использовать Интернет через мобильное устройство, чем через настольный компьютер. (Этот год, вероятно, слишком амбициозен, другие оценки дают 2015 год.)

Как долго будет существовать ваш веб-сайт?

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

Как дела с поддержкой?

Теперь мы идем по тонкому льду. В основном нас будут интересовать мобильные браузеры. Но давайте сначала посмотрим на настольные версии.

Поддерживаются Opera 7+, Mozilla (Firefox 3.5+), Webkit (Safari3+ и Chrome) и Internet Explorer 9.

Для мобильных браузеров все немного интереснее, потому что, как заявил Петр Пол Кох на WebExpo, существует не пять браузеров, а как минимум 15.

В любом случае поддержка предоставляется Opera Mobile,Opera Mini и Mobile Webkit (с небольшими отличиями). Однако многие другие пока не поддерживаются.

Как использовать медиазапросы?

Нам предлагается два пути — мягкая деградация и прогрессивное улучшение .

1. Изящная деградация

Если у меня уже есть готовый веб-сайт и я хочу улучшить его удобство использования на мобильных устройствах, таких как iPhone или Android, я добавляю простой Media Query и специальную таблицу стилей специально для них. Просто, понятно и эффективно. Через полчаса у меня будет удобная мобильная версия сайта.

Примечание автор: Лично я называю этот метод «быстрым и быстрым». грязный», потому что это позволяет нам легко и быстро настраивать страницы так, как мы хотим. Однако я скучаю по многим мобильным устройствам, потому что они не поддерживают медиа-запросы, и я также перетаскиваю много ненужных изображений, которые, возможно, не хочу отображать на мобильных устройствах.

2. Прогрессивное улучшение

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

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

И только в «desktop.css» я буду кодировать полный вид страниц.

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

А как насчет IE?

Вы, должно быть, догадались, что Internet Explorer не поддерживает медиа-запросы, и клиенту не понравится базовый внешний вид сайта. Простая помощь, в конце концов, у нас есть условные комментарии IE.

Примечание авт.: Согласнона мой взгляд разумно обслуживать стиль только для IE 7 и 8 и IE6 и ниже с базовым. IE9 уже распознает медиазапросы, поэтому нам не нужно упоминать об этом.

iPhone и Android

Чтобы медиа-запросы корректно работали на таких устройствах, как iPhone и Andorid, необходимо указать устройствам использовать их реальную область просмотра, а не ту, которую они моделируют для обычных страниц в Интернете. К счастью, это просто. Просто поместите его в заголовок HTML.

Адаптивный веб-дизайн

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

Все, что имеет значение в Интернете, нуждается в запоминающемся названии. Использование медиа-запросов таким образом стало называться Отзывчивый веб-дизайн . Термин был придуман Итаном Маркоттом, и его можно перевести на чешский язык как «отзывчивый дизайн». Итан скрывает в этом термине множество других приемов, таких как гибкие изображения и т. д. Но в основе лежат медиазапросы. Ведь все можно узнать в статье, которая определила термин на A List Apart.

Подробнее о теме

• Крис Койер — CSS Media Queries & Использование доступного пространства (трюки CSS)
• WebDesignerWall — медиа-запросы CSS3
• Спецификация CSS3

В следующий раз

В следующий раз у нас в основном будут селекторы в CSS3 и несколько мелочей.