Как подключить медиа запросы отдельным файлом
Обновлено: 04.07.2024
CSS3 продолжает одновременно восхищать и разочаровывать веб дизайнеров и разработчиков. Восхищают возможности, которые предоставляет CSS3, но разочаровывает практически полное отсутствие поддержки в Internet Explorer 8. В данной статье демонстрируется техника использования CSS3, которая не поддерживается в Internet Explorer 8. Однако, для тех, кому приходится обеспечивать поддержку мобильных устройств (например, iPhone или тех, которые используют Android) такой недостаток будет безразличен.
В данной статье объясняется, как с помощью нескольких правил CSS3 можно создать рабочую версию сайта для iPhone. Будет представлен очень простой пример, а также демонстрация того, как добавить стиль маленького экрана мобильного устройства к уже существующему сайту.
Медиа запросы
Если вам когда-нибудь приходилось создавать стиль для печати страниц веб сайта, то вы уже знакомы с идеей создания специальных таблиц стилей, которые работают в определенных условиях (в данном случае таблица стилей используется при печати страницы). Такой функционал был добавлена в CSS2 с помощью типов носителей . Типы носителей позволяют задавать целевой тип носителя информации, то есть можно определить стили для целей print (печать), handheld(мобильное устройство) и так далее. К сожалению, типы носителей никогда не получали широкой поддержки в устройствах, поэтому они, за исключением типа носителя print, очень редко используются.
Медиа запросы в CSS3 подхватывают данную идею и развивают ее. Но в дополнение к определению типа устройства они позволяют получить сведения о его возможностях. Например:
- ширина и высота окна просмотра
- ориентация – например, мобильное устройство выводит информацию в альбомном или портретном режиме?
- разрешение
Если у пользователя браузер, который поддерживает медиа запросы, то мы можем написать CSS специально для определенной ситуации. Например, определить, что пользователь использует маленькое устройство (например, смартфон) и выдать ему специфический шаблон страницы.Примером применения такой техники может служить сайт конференции dConstruct.
Веб сайт dConstruct 2010 в браузере Safari на экране компьютера.
Веб сайт dConstruct 2010 на экране iPhone
На выше приведенном примере видно, что сайт не просто уменьшается в размерах, а изменяется архитектура его контента, чтобы облегчить восприятие информации на маленьком экране мобильного устройства. Некоторые могут подумать, что просто используется шаблон iPhone, но это не так.. Такой же вид будет и в Opera Mini в телефоне с ОС Android. С помощью медиа запросов и определения возможностей устройства веб сайт dConstruct может обслуживать любой вид устройств, даже таких, о которых разработчики понятия не имели!
Использование медиа запросов для создания таблицы стилей для телефонов
Чтобы начать давайте рассмотрим очень простой пример. Шаблон, представленный ниже - очень простой и имеет всего две колонки.
Простой шаблон с двумя колонками.
Чтобы облегчить чтение на экране телефона, линеаризуем весь дизайн, выстроив только одну колонку, а также сделаем область заголовка меньше, чтобы читателю не нужно было прокручивать страницу до начала контента.
Первый способ использования медиа запросов - создание альтернативной секции CSS прямо в той же таблице стилей. Так, чтобы определить целью маленькие устройства, можно использовать следующий синтаксис:
Затем можно добавить альтернативные правила CSS для маленького экрана в секцию, ограниченную фигурными скобками. Таким образом мы просто переопределяем любые правила, установленные для обычных браузеров ранее в нашей CSS таблице. Так как данная секция располагается последней в файле CSS, то она изменяет предыдущие правила. Таким образом, для линеаризации шаблона и уменьшения секции заголовка нужно добавить следующие строки:
В приведенном коде используется альтернативное фоновое изображение и уменьшается высота и ширина заголовка, затем устанавливаются опции для контента и навигации float: none; и изменяется установка ширины, которая определялась ранее в таблице стилей. Данные правила действуют только для устройств с маленьким размером экрана.
Вид примера на экране iPhone.
Присоединение отдельной таблицы стилей с использованием медиа запросов
Вставка специфического кода для мобильных устройств в основную таблицу стилей может быть хорошим решением в случаях, когда нужно сделать небольшие изменения. Однако, если таблица стилей содержит большое количество свойств, которые нужно изменить для вывода содержимого на маленький экран, лучше сделать отдельный файл CSS для таких правил и присоединять его к странице сайта после основной таблицы стилей.
Присоединение таблицы стилей для мобильных устройств:
Testing media queries
Если вы являетесь владельцем iPhone, телефона с ОС Android или другого устройства, которое имеет браузер, поддерживающий медиа запросы, то можно проверить работу измененного CSS на них. Хотя потребуется загрузить код сайта, чтобы посмотреть на него. А как быть в том случае, если такого устройства нет или нужно провести проверку локально?
В процессе разработки вам может помочь отличный сайт ProtoFluid. Он предоставляет форму для ввода URL и просмотра дизайна, как он будет отображаться на экране iPhone, iPad или другого подобного устройства. Изображение ниже показывает вид сайта dConstruct, который представлен сервисом ProtoFluid для iPhone.
Сайт dConstruct, представленный сервисом ProtoFluid для вида на iPhone.
Можно также ввести размер окна, если нужно проверить отображение сайта на определенном устройстве с известным размером экрана.
Для использования ProtoFluid вам нужно немного изменить медиа запрос, который мы использовали ранее, чтобы добавить опцию max-width. Это будет означать, что медиа запрос будет действовать в том случае, если пользователь использует обычный браузер, но в очень маленьком окне.
После обновления кода, просто перегрузите страницу и уменьшите размер окна, когда он достигнет 480 px, шаблон страницы измениться. Медиа запрос теперь реагирует, когда размер окна просмотра соответствует введенным вам значениям.
Теперь все готово, чтобы использовать ProtoFluid. Основное преимущество ProtoFluid заключается в том, что можно использовать инструменты разработчика , такие как FireBug, для настройки дизайна, что весьма затруднительно на iPhone. Конечно, вы можете пробовать ваш сайт на различных устройствах, но ProtoFluid делает процесс разработки и тестирования значительно проще.
Если вам не нужно, чтобы шаблон сайта изменялся, когда кто-нибудь уменьшает размер окна браузера, вам нужно просто удалить часть max-width запроса перед тем, как открыть доступ к сайту. Таким образом только те, кто смотрит сайт с маленького устройства, будут видеть измененный шаблон страниц.
Настройка существующего сайта
Выше используемый пример очень простой. Он предназначен для демонстрации техники. Однако ее можно легко использовать для существующего сайта, чтобы сделать версию для маленьких экранов. Одним из преимуществ использования CSS для шаблона является возможность обеспечивать альтернативный вариант для готового дизайна. Для демонстрации будет использоваться реальный веб сайт для которого будет использована описываемая техника.
Шаблон страниц
Рассматриваемый сайт использует шаблон фиксированной ширины с тремя колонками. Дизайн был разработан пару лет назад и медиа запросы тогда не принимались во внимание во время разработки.
Добавление нового файла стилей
Чтобы сделать линеаризацию сайта нужно провести много изменений, таким образом, нужно добавить новый файл с таблицей стилей после основного и с условием использования только при значении max-width меньше 480 px.
Для создания нового файла с таблицей стилей берем основной файл сайта и сохраняем его как small-device.css. Таким образом, он начинает жить как копия основного фала с таблицей стилей. Далее в нем надо переписать несколько правил и удалить все ненужное.
Сжатие заголовка
Сначала подгоняем размер логотипа так, чтобы он смотрелся хорошо на маленьких экранах. Просто загружаем другое изображение. Также нужно уменьшить фон для области, в которой выводится логотип.
Линеаризуем шаблон
Далее нужно линеаризовать шаблон и сделать одну колонку. Шаблон создан с использованием плавающих блоков, поэтому надо найти все правила, которые делают колонки плавающими и установить для них свойства float: none и width:auto. Таким образом все колонки выстроятся одна под другой.
"Причесываем"
Теперь посмотрим на шаблон в ProtoFluid и точно настроим размеры полей и отступов для различных областей, которые будут отличаться от того, что установлено для обычного шаблона. С использованием Firebug для ProtoFluid такая работа выполняется быстро и легко, а получившийся набор правил CSS затем копируется в таблицу стилей.
Проверяем сайт в ProtoFluid.
Проверка сайта на iPhone
При проверке на iPhone выяснилось, что сайт не масштабируется в одну чудесную колонку. На сайте разработчиков Safari есть решение для такой проблемы - нужно добавить тег meta к заголовку сайта. в котором устанавливается ширина окна просмотра равной ширине дисплея устройства.
После добавления тега meta сайт стал выводиться как было задумано - в одну колонку:
Вид сайта на экране iPhone.
Простая модификация сайта позволяет сделать легко ваш ресурс доступным для пользователей мобильных устройств.
Заключение
Использованием медиа запросов может ввести CSS3 в вашу повседневную деятельность. Стоить помнить о том, что браузеры, которые поддерживают медиа запросы, также поддерживают все остальные свойства CSS3. Таким образом можно использовать все возможности CSS3, когда пользователь использует iPhone или другое мобильное устройство.
Когда человеку тяжело,
это часто означает,
что он идёт к успеху.
Подключение медиа-запросов
В этой статье будет рассказано то, без чего не возможна адаптивная верстка, т.е. без свойства тега viewport. Благодаря этому тегу окно просмотра изменяется в зависимости от устройства, и будет меньше на мобильном телефоне, чем на экране компьютера. Если раньше все страницы были рассчитаны только для компьютеров и имели статический дизайн и фиксированный размер, то сейчас требуется адаптировать страницы под все мобильные устройства, т.е. под их размеры экранов.
Тег <META> viewport - представляет собой элемент, предоставляющий браузеру инструкции о том, как контролировать размеры страниц и их масштабирование.
Значение мета тега можно записать двумя способами:
Способ 1:
Значение width=device-width в мета теге, информирует браузер о том, что область просмотра контента равна ширине экрана мобильного устройства.
Способ 2:
Можно задать данное значение и следующим образом, к примеру: width=480px:
Так задавать значение не рекомендуется, из-за того, что различные смартфоны могут иметь различную ширину экрана. Поэтому, рекомендуется использовать запись, которая показана в первом варианте. После указания данного мета тега и его значения мы можем спокойно использовать все медиа-запросы в CSS стилях и адаптировать наш сайт. Но для того что бы начать это делать разберемся как указывать (подключать) медиа-запросы к CSS файлу.
1. Способ.
Мы используем один CSS файл и уже в нем подключаем <a href="cсылка на медиа-запросы"> медиа-запросы </a> . В HTML файле подключение CSS файла делается как обычно, внутри тегов <head> и </head>.
Где styles это название каталога, в котором располагается уже сам файл style.css, в котором мы и делаем медиа-запрос.
Еще про медиа-запросы можно найти тут.
2. Способ.
В этом способе мы можем использовать много CSS файлов со стилями, которые подключаются только при определённом заданном размере экрана. И так подключается данный файл вот таким образом:
В HTML между тегами <head> и <head> указываем подключение стилей как обычно, через тег <link>.
Далее указываем атрибут media где прописываем, что only (Все) - screen (возможные значения экрана) - у которых ширина экрана меньше или равна 700px будет применяться файл (style.css) с стилями которые будет содержать этот файл.
3. Способ.
И третий способ, это где наши медиа-запросы подключаются через @import и делается это следующим образом:
В 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств. В качестве медиа-типов были определены следующие: aural , braille , handheld , print , projection , screen , tty , tv . Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.
Кроме того, было введено ключевое слово all , которое использовалось, чтобы указать, что таблица стилей применяется ко всем типам носителей.
В HTML4 медиа-запрос записывался следующим образом:
Внутри таблицы стилей также можно было объявить, что блоки объявлений должны применяться к определенным типам носителей:
Предусматривая возможность введения новых значений и значений с параметрами в будущем, для браузеров была реализована поддержка значений атрибута медиа-носителя, указанных следующим образом:
Текущий синтаксис HTML5 и CSS3 напрямую ссылается на первую спецификацию Media Queries, обновляя правила для HTML. Также был расширен список характеристик медиа-носителей.
Медиазапросы, характеристики устройств и разрешения экрана
Поддержка браузерами
IE: 9.0 (кроме вложенных медиазапросов)
Edge: 12.0
Firefox: 3.5
Chrome: 26.0
Safari: 6.1
Opera: 10.1
iOS Safari: 7.1
Android: 4.4
Chrome for Android: 55.0
1. Что такое медиа-запрос
В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width . Медиа-запрос является логическим выражением, которое возвращает истину или ложь.
Медиа-запросы могут быть добавлены следующими способами:
1) С помощью HTML:
2) С помощью правила @import внутри элемента <style> или внешней таблицы стилей:
3) Непосредственно в коде страницы:
4) Внутри таблицы стилей style.css:
Таблица стилей, прикрепленная через тег <link> , будет загружаться вместе с документом, даже если её медиа-запрос вернет ложь.
2. Логические операторы
С помощью логических операторов можно создавать комбинированные медиазапросы, в которых будет проверяться соответствие нескольким условиям.
2.1. Оператор and
Оператор and связывает друг с другом разные условия:
Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 600px .
Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.
Правило @media all and (max-width: 600px) <. >равнозначно правилу @media (max-width: 600px) <. >.
2.2. Оператор запятая
Оператор запятая работает по аналогии с логическим оператором or .
В данном случае CSS-стили, заключенные в фигурные скобки, сработают только для экранных или проекционных устройств.
2.3. Оператор not
Оператор not позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос
будет эквивалентен запросу
Если медиазапрос составлен с использованием оператора запятая, то отрицание будет распространяться только на ту часть, которая идет до запятой, т.е. запрос
будет эквивалентен запросу
2.4. Оператор only
Оператор only используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).
Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media="only" . Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.
3. Тип носителя
Тип носителя представляет собой тип устройства, например, принтеры, экраны.
| Значение | Описание |
|---|---|
| all | Подходит для всех типов устройств. |
| Предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати. | |
| screen | Предназначен в первую очередь для экранов цветных компьютерных мониторов. |
| speech | Предназначен для синтезаторов речи. |
CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural , braille , embossed , projection , tty , tv и handheld , но они приняты устаревшими в Media Queries 4 и не будут использоваться.
4. Характеристики носителя
К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.
device-width , device-height , device-aspect-ratio являются устаревшими API, они удалены из Media Queries Level 4.
5. Метатег viewport
Для управления разметкой в мобильных браузерах используется метатег viewport . Изначально данный тег был представлен разработчиками Apple для браузера Safari на iOS. Мобильные браузеры отображают страницы в виртуальном окне просмотра, которое обычно шире, чем экран устройства. С помощью метатега viewport можно контролировать размер окна просмотра и масштаб.
При первой загрузке страницы свойство initial-scale управляет начальным уровнем масштабирования, initial-scale=1 означает, что 1 пиксель окна просмотра = 1 пиксель CSS.
Рис. 2. Разница между width и device-width
6. На какие размеры экрана нужно ориентироваться
При составлении медиазапросов нужно ориентироваться на так называемые переломные (контрольные) точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта существенно меняется, например, появляется горизонтальная полоса прокрутки. Чтобы определить эти точки, нужно открыть сайт в браузере и постепенно уменьшать область просмотра.
Чтобы проверить, как выглядит ваш сайт на разных устройствах, можно воспользоваться сервисом Responsive design testing for the masses.
7. Стратегии использования медиа-запросов
Для создания дизайна, позволяющего лучшим образом отображать сайт на различных устройствах, используют общие стратегии медиа-запросов:
1) Уменьшение количества колонок (столбцов) и постепенная отмена обтекания для мобильных устройств.
2) Использование свойства max-width вместо width при задании ширины блока-контейнера.
3) Уменьшение полей и отступов на мобильных устройствах (например, нижних отступов между заголовком и текстом, левого отступа для списков и т.п.).
4) Уменьшение размеров шрифтов для мобильных устройств.
5) Превращение линейных навигационных меню в раскрывающиеся.
6) Скрытие второстепенного содержимого на мобильных устройствах с помощью display: none .
7) Подключение фоновых изображений уменьшенных размеров.
В прошлом создание веб-сайта было более простой задачей. На сегодняшний день макет веб-сайта должен адаптироваться не только к компьютерам, но и к планшетам, мобильным устройствам и даже телевизорам.
Создание веб-сайта с адаптируемым макетом называется отзывчивым веб-дизайном, а медиа-запросы CSS — одни из важнейших его частей. В этой статье мы подробно рассмотрим медиа-запросы и способы их использования в CSS.
Что такое медиа-запрос?
Медиа-запрос — это функция CSS3, которая используется для адаптации макета веб-страницы к различным размерам экрана и типам устройств.
Синтаксис
@media media type and (condition: breakpoint) // Правила CSS
>
Мы можем ориентироваться на различные типы устройств в зависимости от условий. Правила внутри медиа-запроса применяются только при совпадении условий and/or в типах устройств.
Синтаксис может показаться сложным, поэтому давайте рассмотрим каждую его часть по отдельности.
Правило @Media
Начнем определение медиа-запросов с правила @media, а затем включим правила CSS в круглые скобки. Оно используется для указания типов целевых устройств:
Скобка
Внутри скобки мы устанавливаем условие. Например, нам нужно увеличить размер шрифта для мобильных устройств. Для этого устанавливаем максимальную ширину, которая проверяет ширину устройства:
Обычно размер текста составляет 14 пикселей. Однако, поскольку мы применили медиа-запрос, он изменится до 16 пикселей при максимальной ширине устройства 480 пикселей и меньше.
Важно: медиа-запросы всегда должны находиться в конце CSS-файла.
Типы устройств
Типы устройств размещаются сразу после правила @media. Если тип не указан, правило @media выбирает все типы по умолчанию. Существует множество видов устройств, однако их можно разделить на 4 категории:
- all — для всех типов устройств;
- print — для принтеров;
- screen — для экранов компьютеров, планшетов и смартфонов;
- speech — для скринридеров, которые «читают» страницу вслух.
Например, чтобы выбрать только экраны, нужно установить ключевое слово screen сразу после правила @media. Правила также необходимо объединить ключевым словом «and»:
Точки останова
Точка останова — это ключ, который определяет, когда следует изменить макет и адаптировать новые правила внутри медиа-запросов. Вернемся к нашему примеру:
Здесь точка останова составляет 480 пикселей. Теперь медиа-запрос знает, когда устанавливать или перезаписывать новый класс. Если ширина устройства меньше 480 пикселей, то будет применен класс text.
Распространенные точки останова: есть ли стандартное разрешение?
Какую точку останова следует использовать? Поскольку на рынке существует множество устройств, то невозможно определить фиксированные значения для каждого из них.
Следовательно мы не можем сказать, что существует стандартное разрешение для устройств, однако в повседневном программировании есть несколько часто используемых вариантов. Если вы используете фреймворки CSS (например, Bootstrap, Bulma и т. д.), вы также можете применять их точки останова.
Рассмотрим некоторые распространенные точки останова:
- 320px — 480px: мобильные устройства;
- 481px — 768px: планшеты;
- 769px — 1024px: маленькие экраны, ноутбуки;
- 1025px — 1200px: большие экраны;
- 1201px и больше — очень большие экраны, телевизоры.
Как уже было сказано выше, точки останова могут различаться и точно определенного стандарта нет, однако приведенные выше примеры используются чаще всего.
Заключение
Отзывчивость является обязательным параметром в современной области веб-дизайна и разработки, а медиа-запросы — одни из наиболее важных частей создания отзывчивых макетов. Я надеюсь, что эта статья помогла вам разобраться в том, как они работают.
Читайте также: