Настройки css для телефона
CSS3 продолжает радовать и, одновременно, разочаровывать веб-дизайнеров и веб-разработчиков. Мы радуемся возможностям, которые открывает перед нами CSS3, и тому, сколько проблем можно будет решить, используя их. Разочарование заключается в том, что все эти возможности недоступны браузерам Internet Explorer 8 и ниже. В этой статье будет продемонстрирована техника, использующая функционал CSS3, который также не поддерживается в Internet Explorer 8. На самом деле это не имеет никакого значения, т.к. главной областью применения этой техники являются мобильные устройства, такие как Iphone и Android-смартфоны, у которых браузеры поддерживают большое количество свойств CSS3.
В этой статье я объясню, как, с помощью нескольких правил CSS, вы можете создать Iphone-версию вашего сайта. Мы взглянем на очень простой пример и, попутно, я буду объяснять, как написать и использовать таблицу стилей для мобильных устройств для существующего сайта.
Медиа-запросы
Если вы хоть раз создавали таблицу стилей для своего сайта, которая описывала бы, как веб-страница выглядит на бумаге после печати, то вам уже знакома идея создания конкретной, отдельной таблицы стилей, которая начинает действовать при наступлении определённых условий – в случае с таблицей стилей для печати, когда страница будет отправлена на печать. Такая функция была введена в CSS2 c помощью медиа-типов. Они позволяют указать браузеру тип устройства, на котором нужно отобразить сайт – принтер, экран монитора, планшет и т.д. К сожалению, эти типы не получили большого внимания и вы вряд ли встретите использование каких-либо типов, кроме как для печати @media print .
Медиа-запросы в CSS3 используют эту идею и расширяют её. Вместо того, чтобы определять тип устройства, они определяют его свойства и вы можете использовать медиа-запросы для проверки следующих параметров:
- высоту и ширину окна браузера
- высоту и ширину экрана устройства
- положение в пространства (вертикально или горизонтально)
- разрешение экрана
Если пользователь использует браузер, который поддерживает медиа-запросы, тогда мы можем написать CSS-стили для определённых ситуаций. Для примера мы можем определить, что пользователь использует смартфон и показать ему совершенно другой дизайн сайта.
Так выглядит сайт на экране монитора:
А так он выглядит на экране смартфона:
Как вы видите на примере выше, мобильная версия сайта не просто была уменьшена, чтобы соответствовать экрану на телефоне – её структура была полностью переработана и спроектирована заново, чтобы сайт легко воспринимался на маленьком экране устройства. Многие подумают, что это специальный макет для iPhone, но это не так. Сайт одинаково выглядит на Android-устройствах, iPhone и в телефонах с браузером Opera Mini. используя медиа-запросы мы определяем свойства устройств и отображаем специально написанные стили для них.
Использование медиа-запросов для создания таблиц стилей для телефонов
Для начала разберём очень простой пример – ниже представлен макет с двумя колонками.
Чтобы сделать его более удобным для чтения на iPhone, я решил сделать весь дизайн в одну колонку, также уменьшим область с картинкой и заголовком, чтобы читателям сайта не приходилось прокручивать её до основного текста.
Первый способ использовать медиа-запросы – это просто написать альтернативную секцию с правилами CSS в вашей таблице стилей. Итак, для определения маленьких экранов, мы используем следующий синтаксис:
Затем нам нужно написать необходимые стили CSS для устройств с маленьким экраном внутри фигурных скобок. Из за того, что наша таблица стилей каскадная, мы можем переписать ранее заданные стили для необходимых элементов. Это работает до тех пор, пока раздел с медиа-запросом для маленьких экранов идёт ниже обычных стилей. Итак, добавим следующие правила:
Мы используем альтернативное изображение меньшего размера и уменьшаем высоту заголовка, затем отменяем свойство float для контента и навигации, установив его в значение none . Это нужно чтобы блоки с контентом и навигации располагались в нормальном потоке – друг под другом. Следующий шаг – установка ширины для контента, равной родительского элемента, а ширины блока навигации установим в значение auto . Все эти правила вступят в силу только на маленьком экране.
Подключение отдельной таблицы стилей, используя медиа-запросы
Добавление медиа-запросов со стилями для мобильных устройств в основную таблицу стилей целесообразно, только есть вы хотите внести немного изменений. Если же таблица стилей содержит тонну строк правил для разных устройств или вы хотите полностью отделить стили для настольных компьютеров и мобилок, то вам целесообразней подключать свою таблицу стилей для каждого устройства.
Чтобы подключить отдельную таблицу стилей и, используя каскадность, переписать существующие стили, необходимо после подключения основного css-файла написать следующие строки:
Модернизация существующего сайта
Пример выше очень простой, он призван продемонстрировать саму технику. Тем не менее, этот метод может быть легко применён к уже существующему сайту для создания его мобильной версии. В качестве эксперимента я взял собственный сайт и на его примере буду применять эту технику.
Макет для экрана монитора
На данный момент сайт имеет несколько колонок. Домашняя страница несколько отличается от остальных, но в целом они все построены на трёх колонках. Этому сайту уже несколько лет и, когда он создавался, никто не рассматривал медиа-запросы. Да и сами медиа-запросы были ещё на стадии разработки.
Подключаем новую таблицу стилей
Необходимо сделать несколько изменений, чтобы макет смотрелся круто на телефонах, поэтому мы подключаем отдельную таблицу стилей после основной, используя медиа-запросы, которая вступит в силу на экранах, ширина которых меньше 480px.
Для создания новой таблицы стилей, мы делаем копию основной и называем её small-device.css. Мы перезапишем некоторые правила, а всё лишнее удалим.
Сокращаем размер шапки
Первое, что нужно сделать, это уменьшить логотип чтобы он классно смотрелся на экране телефона. Так как логотип является фоновым изображением, мы просто заменим одно изображение на другое, меньшего размера.
Изменяем макет
Следующим шагом мы изменяем макет, чтобы он был одну колонку. Колонки в текущем макете для настольных компьютеров являются плавающими, их позиции заданы свойством float . Всё, что нам нужно сделать, это отменить свойство float и вернуть нормальный поток блоков, друг под другом. Так же мы установим ширину блоков в 100% от родителя.
Прибираемся
Настало время проверить наш макет в онлайн-эмуляторе и подкорректировать мелкие недочёты, чтобы всё смотрелось супер. Для облегчения этого процесса рекомендую использовать расширение firebug для Mozilla.
Тестируем на Iphone
Вот теперь сайт отображается как надо!
Это был очень простой пример, который показал, как легко адаптировать сайт под мобильные устройства.
Источник
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 или другое мобильное устройство.
В 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) Подключение фоновых изображений уменьшенных размеров.
В этой статье мы подробно рассмотрим, что такое медиа-запросы, как они работают и как их правильно использовать, в том числе и для создания адаптивного дизайна. Разберём конструкции @media, которые используются в Bootstrap.
Что такое медиа-запросы
Медиа-запросы (media queries) – это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.
Медиа-запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются всеми современными браузерами (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).
Медиа-запросы предназначены для создания адаптивных дизайнов. Адаптивный дизайн отличается от других тем, что он может «приспосабливаться» (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер).
Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение адаптивных дизайнов сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы.
Подключение метатега viewport к странице осуществляется так:
Синтаксис
Создание медиа-запроса начинается с ключевого слова @media после которого указывается одно или несколько условий . В качестве условия можно указывать тип устройства или требования к определённой характеристике . Требование к определённой характеристике записывается в круглых скобках .
Комбинирование нескольких условий выполняется с помощью логических операторов .
После составления @media , стили, указанные в нём, будут применяться только в том случае, когда итоговый результат вычисления условий является истинной.
Пример медиа-запроса с одним условием:
Пример медиа-запроса с комбинированием нескольких условий:
Типы устройств
В @media можно указывать определённые типы устройств :
- all – для всех;
- print – для принтеров и в режиме предварительного просмотра страницы перед печатью;
- screen – для устройств с экранами;
- speech – для программ чтения с экрана.
Например, этот @media только для экранов:
А здесь для экранов и принтеров:
Логические операторы
Логические операторы and , , (запятая), not и only предназначены для создания сложных медиа-запросов.
Оператор and используется для объединения нескольких условий. В этом случае их результат будет истинным, когда каждое из них будет истинным.
Например, следующий @media будет применяться только при выполнении всех трёх условий (это экран, width >= 1200px и ориентация landscape):
, (запятая)
Применение стилей, когда необходимо лишь выполнение одного из указанных условий, достигается посредством разделения их между собой с помощью , (запятой).
В этом примере стили будут применяться к странице в двух случаях. Когда width >= 544px или ориентация portrait .
Ключевое слово not используется для отрицания.
При использовании not с and отрицание работает для всего медиа-запроса. При этом, когда указываем not необходимо обязательно задавать тип устройства.
Например, применим стили только в том случае, когда не (экран и width >= 411px и height >= 731px) .
При использовании not в выражении с запятой он добавляет отрицание только для этой части.
Например, применим стили когда истинно следующее условие: не экран или не width >= 411px .
Ключевое слово only предназначено для того, чтобы браузеры, которые не поддерживают CSS3 медиа-запросы их игнорировали. В настоящее время это уже не актуально, поэтому использовать only не нужно.
Медиа-характеристики
При составлении условия кроме типов устройств и логических операторов можно ещё задавать требования к определённым характеристикам , которые должен иметь браузер, устройство вывода, или окружение. В некоторых источниках характеристики называют медиа-функциями.
Каждая характеристика в @media должна быть заключена в круглые скобки.
При этом применяться стили указанные в @media будут также как раньше, т.е. только в том случае, когда результат вычисления всего выражения будет являться истиной.
width
Медиа-характеристика width позволяет задать условие на равенство ширины области просмотра определённому значению.
Например, применим CSS только для viewport с шириной 320px.
Для определения диапазона можно использовать min-width и max-width .
Например, @media для ширины viewport от 576px до 1200px:
Для ширины больше 768px:
Если нужно меньше 1400px:
height
Для задания условий в отношении высоты viewport можно использовать height , min-height и max-height .
Например, @media для высоты viewport больше 720px:
orientation
С помощью orientation можно установить те или иные стили в зависимости от того, в каком режиме (альбомном или портретном) отображается сайт.
Например, в зависимости от ориентации viewport будем отображать разные картинки:
aspect-ratio
Характеристики aspect-ration , min-aspect-ratio и max-aspect-ratio позволяют задавать стили в зависимости от соотношения сторон viewport.
resolution
Характеристики resolution , min-resolution и max-resolution можно использовать, когда нужно задать стили в зависимости от плотности пикселей устройства.
Например, установим другой размер шрифта для устройств с плотностью пикселей на дюйм более 150:
Стили для печати страницы с плотностью пикселей больше 300dpi:
Медиа-запросы в <link> и @import
При подключении таблицы стилей можно с помощью атрибута media установить медиа-запросы и тем самым определить условия, когда они должны использоваться.
Кроме <link> , их также можно использовать в @import :
Медиа-запросы для Bootstrap 3
Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):
Вышеприведённые запросы необходимо использовать только в указанном порядке.
Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width . Это заставит их работать только в указанном диапазоне.
Медиа-запросы для Bootstrap 4
Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):
Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):
Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:
Код JavaScript, учитывающий параметры устройств
Наиболее простой способ создания кода JavaScript, учитывающий параметры устройств (аналогично CSS медиа-запросам), осуществляется с помощью метода matchMedia объекта window .
Осуществляется это следующим образом:
Например, эту возможность можно применить для асинхронной загрузки картинок в зависимости от того какой размер viewport имеет устройство (браузер).
Метод matchMedia не поддерживается Internet Explorer 9 и другими старыми браузерами. Для того чтобы обеспечить эту функциональность в старых браузерах можно воспользоваться методом mq библиотеки Modernizr.
Комментарии:
Добрый день! Подскажите, пожалуйста, как перестроить расположение блоков в зависимости от устройства?Я создал в коде html 3 варианта расположения блоков. Как сделать так, чтоб блоки меняли размеры и перестраивались в зависимости от ширины экрана? Необходимо использовать медиа-запросы или JavaScript (скриншот)?
Спасибо! Здравствуйте. Подскажите, пожалуйста, можно ли с помощью медиа запроса «разбить» блок? при отображении на ширине 480px должен отображаться один блок с текстом, а при 1000рх и больше — он должен разбиваться на два одинаковых по ширине, по бокам страницы.
вот этот код даёт только один блок слева при 1000рх, как получить второй?
Здравствуйте. Вам необходимо создать 2 блока. На маленьких экранах в этом случае следует отображать один блок, а второй – скрывать (display: none). На больших экранах отображать 2 блока с нужной шириной. Это если вам нужно создать именно блоки.
Если нужно просто разбить контент, то можно использовать колонки (column-count). Про создание многоколоночного текста можно почитать в этой статье. Да, нужны блоки. Получается на большом экране должно быть два блока с текстом и картинка между ними. А на маленьком — один блок с текстом из двух больших блоков, и картинка уже под этим блоком…
Добрый день!
Такой вопрос, применил в js
Всё работает, но! например, при повороте экрана на большой мобилке не отображается большое меню (а должно), плюс пользователь всегда может сжать браузер
Отсюда вопрос: как сделать так, чтобы js «слушал» изменение размера?
Здравствуйте!Так, конечно, у вас код сработает один раз.
В этом случае его нужно добавить в обработчик события, который будет вызываться при смене размеров экрана:
Может кому-то поможет. Все дело было в работе LiveServer для VSCode. При стандартном открытии html документа все брейкопинты работают хорошо) Добрый день, подскажите: использую Bootstrap 4.3.1. Сделал макет при помощи готовых классов. При включении панели разработчика и настройки адаптивности, возникла проблема. до 512px работают классы col-sm, с 512px до 660px col-md, с 660px до 799px col-lg. В документации идут значения 576px, 768px, 992px и 1200px. Почему у меня стили присваиваются на непонятных значениях ширины?
Привет!
576px, 768px, и т.д. — это значения по умолчанию. Их можно изменить. Скорее всего вы используете сборку Bootstrap, в которой эти значения по умолчанию переопределены.
Извиняюсь может я слишком загнался по этому вопросу и можно закончить проект с теми брейкпоинтами что есть, но очень хочется разобраться как это работает)
Это работает очень просто.
Первое CSS правило отрабатывает всегда. Оно задаёт .container 100% ширину того блока, в который он помещён и центрирует его в нём в горизонтальном направлении по центру. Если ширина viewport меньше 576px, то остальные правила не отрабатывают. В остальных правилах имеются условия, и они будут отрабатывать только в том случае, если ширина viewport бразуера пользователя будет не меньше указанной величины (min-width).
Если ширина viewport браузера пользователя больше или равно 576px и меньше 768px то к .container применятся все CSS свойства заданные в первом правиле и CSS свойство max-width: 540px. Т.к. 2 правило проходит по условию.
Если ширина viewport бразуера пользователя больше или равно 768px и меньше 992px, то к .container применятся все CSS свойства, заданные в первом правиле, max-width: 540px и max-width: 720px. Т.к. 2 и 3 правило проходит по условию. Но CSS свойство max-width: 720px расположено ниже по коду, чем CSS-свойство max-width: 540px. В результате будет применены все CSS свойства, заданные в первом правиле и max-width: 720px.
Здравствуйте! Спасибо за статью… но помогите разобраться, я никак не могу понять и всё время путаюсь, каким образом делается адаптивность через @media (min-width). Я все время использую @media (max-width). Мне дают макет, я по нему делаю верстку, а потом уменьшаю экран и пишу медиазапросы @media (max-width)… Но min-width идет от меньшего к большему и у меня всё в голове «ломается», ведь изначально уже сделано всё для большего размера, а тут получается каждый брейкпоин идет к большему. Подскажите, как их правильно применять?"@media (min-width)" удобно использовать, когда вы при разработке дизайна используете стратегию «Mobile First», т.е. сначала пишите стили для отображения страниц на самых маленьких экранах, затем переходите к более крупным и так далее.
В этом случае вы в самом начале пишите стили для самых маленьких устройств без использования "@media (min-width)".
Затем переходите к следующей ширине после самых маленьких устройств. На этом этапе переопределяете существующие стили, если они должны для данной ширины иметь другой вид, и при необходимости добавляете новые. Для этого вы их заключаете в "@media (min-width)".
При этом этот фрагмент стилей должен располагаться после дефолтных стилей.
Затем переходите к следующей ширине и т.д. При этом важно соблюдать порядок следования фрагментов, т.е. сначала стили без "@media (min-width)", потом, например, с использованием правила "@media (min-width: 576px)", далее с "@media (min-width: 768px)" и т.д.
Если вы проектируете, начиная с самого большого размера, то в этом случае лучше создавать наоборот. Т.е. сначала создаёте дефолтные стили, которые будут определять дизайн веб проекта на самых больших экранах. Далее переходите к более маленьким. На каждом из этих этапов вы переопределяете существующие стили, действующие на эту ширину и заключаете их в @media (max-width), чтобы их действие не распространилась на более большую ширину. Но этот вариант разработки обычно не используют, предпочитая стратегию «Mobile First.
Читайте также: