Содержание

Использование медиавыражений — CSS | MDN

Медиавыражения используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиавыражения являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые есть у ваших пользователей.

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

@media print { ... }

Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:

@media screen, print { .
 
 .. }

Список устройств вы можете найти перейдя по этой ссылке (en-US). Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.

Media features (en-US) описывают некие характеристики определённого user agent, устройства вывода или окружения. Например, вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь) будет расположено над элементами:

@media (hover: hover) { ... }

Многие медиавыражения представляют собой функцию диапазона и имеют префиксы «min-» или «max-«. Минимальное значение и максимальное значение условия, соответственно. Например этот CSS-код применяется только если ширина viewport меньше или равна 12450px:

@media (max-width: 12450px) { . .. }

Если вы создаёте медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:

@media (color) { ... }

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

@media speech and (aspect-ratio: 11/5) { ... }

Дополнительные примеры медиавыражений, смотрите на справочной странице для каждой конкретной функции.

Иногда вы хотите создать медиавыражение, включающее в себя несколько условий. В таком случае применяются логические операторы: not, and, and only. Кроме того, вы можете объединить несколько медиавыражений в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.

В прошлом примере мы видели, как применяется оператор and для группировки type и функции. Оператор and также может комбинировать несколько функций в одно медиавыражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Оператор only работает тогда, когда применяется всё выражение, не позволяя старым браузерам применять стили.

Примечание: In most cases, the all media type is used by default when no other type is specified. However, if you use the not

or only operators, you must explicitly specify a media type.

and

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

@media (min-width: 30em) and (orientation: landscape) { ... }

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

@media screen and (min-width: 30em) and (orientation: landscape) { .
 
 ..  }

comma-separated lists

You can use a comma-separated list to apply styles when the user’s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user’s device has either a minimum height of 680px or is a screen device in portrait mode:

@media (min-height: 680px), screen and (orientation: portrait) { ... }

Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

not

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries. ) The not keyword can’t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

@media not all and (monochrome) { ... }

… so that the above query is evaluated like this:

@media not (all and (monochrome)) { ... }

… rather than like this:

@media (not all) and (monochrome) { ... }

As another example, the following media query:

@media not screen and (color), print and (color) { ... }

… is evaluated like this:

@media (not (screen and (color))), print and (color) { ... }

only

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />
  • Media types (en-US)
  • Media features (en-US)
  • Testing media queries using code (en-US)
  • CSS Animations Between Media Queries
  • Extended Mozilla media features (en-US)
  • Extended WebKit media features (en-US)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Медиа-запросы в адаптивном дизайне 2018 / Хабр

В июле 2010 года я написала статью «Как использовать CSS3 медиа-запросы для создания мобильной версии вашего сайта» для журнала Smashing. Спустя почти восемь лет эта статья по-прежнему очень популярна. Я решила вернуться к этой теме, поскольку теперь у нас есть такие методы компоновки, как Flexbox и CSS Grid. В этой статье мы рассмотрим современные методы использования медиа-запросов в адаптивном дизайне, а также рассмотрим, что может произойти в будущем.

Нужны ли вообще медиа-запросы?

Первое, что нужно сделать перед тем как написать медиа-запрос в 2018 году — спросить себя, нужно ли вообще его использовать. При построении сеток с использованием float мы создаем гибкую сетку, вычисляя размер наших колонок используя проценты. Эти проценты вычисляются методом Этана Маркотт (Ethan Marcotte), описанным в статье Fluid Grids. Этот метод лег в основу техники, которую мы теперь знаем как «отзывчивый дизайн». Чтобы изменить размер или пропорции колонок, мы должны добавить контрольную точку используя медиа-запрос и переопределить их. В работе с процентами других возможностей нет — колонки всегда будут равны проценту от контейнера, в котором они находятся, будь то широкий или узкий контейнер.

Flexbox, CSS Grid и многоколоночная верстка (Multi-column layout) адаптивны по умолчанию, так как их спецификации были написаны в мире, где адаптивный дизайн и кросс-девайсность уже стали реальностью. Это значит, что они уже включают в себя множество функций, которые позволяют легко создавать адаптивные сетки.

В этом CodePen приведены примеры того, как Multi-column, Flexbox и Grid меняют размеры и положение в соответствии с доступным пространством. Здесь нет медиа-запросов и совсем немного CSS.

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

Допустим flex-basis для наших элементов составляет 250px. Если нет места для двух 250px колонок, они будут выстраиваться в колонку, а если задать положительный flex-grow они еще будут заполнять все доступное пространство.

.media {
    display: flex;
    flex-wrap: wrap;
}
.media > * {
    flex: 1 1 250px;
}

Когда есть достаточно места для отображения двух колонок


Контент в одну колонку

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

В примере ниже показано, как контент может быть ограничен вьюпортом (измените размер окна, чтобы увидеть гибкость) и контейнером.

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

grid {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr;
}
Для более широкой сетки я использую медиа запрос для переопределения количества колонок и задаю свойство, чтобы некоторые блоки охватили несколько соседних ячеек.

@media (min-width: 40em) {
    .grid {
        grid-template-columns: 2fr 1fr;
    }
    header,
    footer {
        grid-column: 1 / 3;
    }
}
Сочетание уместно примененных медиа-запросов и новых методов компоновки предоставляет нам множество возможностей для достижения наилучшего UX на любом устройстве. В этом CodePen я объединила сетку выше с чуть ранее созданным медиа-объектом. Как вы видите, для контента вполне достаточно места на десктопе, но когда доступная область для содержимого становится слишком узкой, сетка преобразуется медиа-запросом, а блоки встают в одну колонку без медиа-запроса.


Медиа-запросы — лучшие практики

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

НЕ ОРИЕНТИРУЙТЕСЬ НА УСТРОЙСТВА, ДОБАВЬТЕ КОНТРОЛЬНЫЕ ТОЧКИ КОГДА СЧИТАЕТЕ, ЧТО СЕТКУ НАДО ПЕРЕСТРОИТЬ

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

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

СУЩЕСТВУЮТ НЕ ТОЛЬКО ПИКСЕЛИ

Создавая контрольные точки подумайте о переходе с пикселей. Слишком длинная строка текста является основным признаком, что пора задать контрольную точку. Лучше использовать em вместо пикселей, это обезопасит от случаев, когда у пользователя размер шрифта больше ожидаемого.

БУДЬТЕ ОСОБЕННО ОСТОРОЖНЫ МЕНЯЯ ПОРЯДОК FLEX И CSS GRID ЭЛЕМЕНТОВ

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

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

Примечание. Для получения дополнительной информации прочитайте статью «Flexbox & the keyboard navigation disconnect».

НЕ ЗАБУДЬТЕ ПРО ВЕРТИКАЛЬНЫЕ МЕДИА-ЗАПРОСЫ

Большинство разработчиков ассоциируют медиа-запросы с шириной устройств. Главное — обеспечить достаточно горизонтального пространства для отображения нескольких столбцов контента. Но медиа-запросы можно использовать и для проверки доступной высоты.

Вертикальные медиа-запросы могут быть полезными, например, когда нужно убедиться, что экран имеет достаточно высоты для отображения и просмотра контента в несколько колонок рядом без необходимости прокрутки вверх и вниз. В приведенном ниже CSS, многоколоночная сетка будет перестраиваться только в том случае, если достаточно места для двух колонок по 15em. Я добавила медиа-запрос с min-height, чтобы проверять, когда достаточно высоты чтобы чем начинать выстраивать колонки. Если это небольшой экран в альбомном режиме, то покажется только один столбец, чтобы пользователь мог прокручивать вниз и читать.

@media (min-height: 500px) {
  section {
    column-width: 15em;
  }
}

Медиа-запросы Level 4: Что ожидать?

Медиа-запросы, которые мы используем для создания адаптивного дизайна пришли к нам из спецификации CSS Level 3. Новая спецификация медиа-запросов Level 4 разрабатывается рабочей группой CSS. Эта спецификация добавит новый функционал, и произойдут некоторые изменения в синтаксисе. Не все еще реализовано и не все работает даже в современных браузерах, но уже стоит обратить внимание на новую спецификацию и изучить, что же может произойти в ближайшее время. Это поможет нам быть готовыми создавать пользовательские интерфейсы, которые хорошо работают с широким спектром устройств и разнообразием форматов вывода.

Определяем устройство ввода, а не размер экрана

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

Раньше мы могли выяснить только размер экрана пользователя, сейчас ситуация несколько иная. Теперь мы можем определить может ли пользователь наводить на элементы, а так же тип его указателя, будь то палец или мышь. Свойства pointer и hover помогут улучшить UX для разных типов пользователей и собирать более точные статистики. Приведенные ниже примеры будут работать в текущих версиях Chrome, Safari и Edge. Вы можете проверить, Can I Use для полного списка поддержки браузерами.

Нижеприведенный CodePen вы можете протестировать с любого мобильного браузера. Свойство content выведет результат проверки типа указателя, которым вы пользуетесь.

@media (pointer:coarse) {
    .which-pointer::after {
        content: "You have a coarse pointer, are you on a touchscreen device?";    
    } 
}
@media (pointer:fine) {
    . which-pointer::after {
        content: "You have a fine pointer, are you using a mouse or trackpad?";    
    } 
}
Чтобы узнать, можете ли вы навести курсор, проверим доступность функции наведения:

@media (hover) {
    .can-i-hover::after {
        content: "You look like you can hover.";    
    } 
}
@media  (hover:none) {
    .can-i-hover::after {
        content: "I don't think you can hover.";    
    } 
}

Тестирование поддержки курсора и состояния наведения на iPhone

Протестируйте сами в CodePen.

Существуют также свойства any-pointer и any-hover, которые проверяет все доступные возможности любого планшета и смартфона к указателям и наведениям. Следует проявлять большую осторожность при использовании этих свойств, поскольку переход пользователя с основного устройства указания может привести к плохому UX. Спецификация гласит:

«Проектирование страницы, основываясь на any-hover и any-pointer, вероятно, приведет к плохому UX, потому что свойства указывают только последний из доступных механизмов ввода. Тем не менее, авторы могут использовать эти свойства, чтобы определить функциональность, которую они хотят предоставить, на основе любых дополнительных указывающих устройств, доступных пользователю».
Firefox — браузер отстающий от реализации данного функционала. Вот ссылка на этот баг. Надеюсь, вскоре мы увидим полную поддержку.

Переполнение контента и Display Quality Media Features

Пока еще не реализованное свойство overflow-block, часть Display Quality Media Features, позволит проверить то, как поведет себя блок при переполнении контентом.

Медиа-запросы должны быть разными когда происходит переполнение контента. Стандартный способ решения данной проблемы для планшетов и десктопа — добавление прокрутки. Но некоторые устройства, например, электронный рекламный щит не могут переполняться. Так же у нас есть, Paged Media, если вы выводите контент для печати,.

Есть еще одно полезное свойство, которое поможет определить на каком устройстве отображается контент — overflow: block. Например, вы хотите проверить Paged Media ли контент.

@media (overflow-block: paged) {
}

Синтаксические изменения

Медиа-запросы — такие, какими мы их знаем, достаточно объемные в написании. Изменения синтаксиса медиа-запросов Level 4 поможет с этим. Часто мы используем диапазоны, например между 40em и 59em.

@media (min-width: 40em) and (max-width: 59em) {
}
Мы могли бы записать как диапазон в таком виде:

@media (40em <= width <= 59em ) {
}
Во втором примере кода мы ставим условие, что ширина должна быть больше или равна 40em, а также меньше или равна 59em. Это намного проще и короче, нежели префиксы с минимальной и максимальной шириной первого примера. По прежнему можно будет использовать старый синтаксис. Тем не менее, такая менее объемная альтернатива кажется очень полезной.

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

  • «7 Habits of Highly Effective Media Queries», Brad Frost
  • «Vertical Media Queries and Wide Sites», Trent Walton
  • «Media Queries 4», Florian Rivoal, dotCSS 2017 (video)
  • «Interaction Media Features and their Potential (for incorrect assumptions)», Patrick H. Lauke, Dev.Opera

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

Содержание

Что такое точки останова CSS?

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

Для этого разработчики должны использовать контрольные точки CSS. Это точки, определенные в коде. Контент веб-сайта реагирует на эти моменты и подстраивается под размер экрана, чтобы отображать точную компоновку.

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

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

Например, когда веб-сайт The New Yorker просматривается на обычном экране рабочего стола, пользователь видит все меню навигации в верхней части страницы. Однако, если его просматривать на iPhone X, меньший размер экрана приведет к тому, что панель навигации появится в верхнем левом углу экрана в виде меню-гамбургера.

Рабочий стол

Мобильный вид

Убедитесь сами в программе проверки адаптивного дизайна BrowserStack.

По сути, контрольные точки медиа-запросов — это значения пикселей, которые разработчик/дизайнер может определить в CSS. Когда адаптивный веб-сайт достигает этих значений пикселей, происходит преобразование (например, описанное выше), чтобы веб-сайт предлагал оптимальное взаимодействие с пользователем.

Как установить контрольные точки CSS для адаптивного дизайна

Существует два основных подхода при установке точек останова CSS для адаптивного дизайна:

1. Точки останова CSS на основе устройства

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

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

Тем не менее, чтобы охватить все базы, можно по крайней мере установить контрольные точки на основе наиболее популярных устройств, используемых для доступа к веб-сайту. Используйте для этой цели Google Analytics. Просто следуйте по указанному ниже пути:

Аудитория > Технология > Браузер и ОС > Разрешение экрана

  • Установите контрольные точки для 10 разрешений экрана устройств, с которых осуществляется доступ к веб-сайту.

Кроме того, при работе над макетом веб-сайта используйте подход, ориентированный на мобильные устройства. Сначала разработайте сайт для мобильных устройств, так как примерно 50% всего веб-трафика поступает с мобильных устройств.

Можно также установить точки останова для общих групп устройств вместо конкретных устройств:

 /* Очень маленькие устройства (телефоны, 600px и меньше) */
Только экран @media и (max-width: 600px) {...}
/* Маленькие устройства (портретные планшеты и большие телефоны, 600 пикселей и выше) */
Только экран @media и (min-width: 600px) {. ..}
/* Устройства среднего размера (планшеты с горизонтальной ориентацией, 768 пикселей и выше) */
Только экран @media и (min-width: 768px) {...}
/* Большие устройства (ноутбуки/рабочие столы, 992px и выше) */
Только экран @media и (min-width: 992px) {...}
/* Очень большие устройства (большие ноутбуки и настольные компьютеры, 1200 пикселей и выше) */
@media only screen and (min-width: 1200px) {...}

Источник

2. Точки останова CSS на основе содержимого

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

Хорошим правилом в этом отношении является добавление точки останова, когда содержимое выглядит смещенным.

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

Давайте рассмотрим несколько примеров:

CSS срабатывает, когда ширина устройства составляет 768 пикселей и выше 

 @экран только для мультимедиа (минимальная ширина: 768 пикселей){
...
}

CSS срабатывает в пределах: от 768 до 959 пикселей 

 Только экран @media и (минимальная ширина: 768 пикселей) и (максимальная ширина: 959 пикселей){
...
}

Использование min-width и max-width для точек останова CSS

Установить точки останова легко благодаря свойствам min-width и max-width.

Использование max-width помогает улучшить работу браузера в случае небольших размеров экрана. Настройка ширины отклика CSS важна для доступа к устройству на небольших экранах:

 
 div.ex1 { 
 ширина: 300 пикселей; поле 
: авто; граница 
: 2 пикселя сплошная #00FFFF; 
 } 

 
 div.ex2 { 
 максимальная ширина: 300 пикселей; поле 
: авто; граница 
: 2 пикселя сплошная #00FFFF; 
 }

Здесь, в первом div, поле (ширина) не будет изменяться в соответствии с размером экрана, тогда как второе (максимальная ширина) будет изменяться.

Несколько лучших практик:

  • При проектировании с использованием мобильного подхода (упомянутого выше) начните с установки контрольных точек минимальной ширины. Стили по умолчанию должны быть для небольших экранов устройств. Затем добавьте и настройте для больших экранов.
  • И наоборот, при проектировании для больших устройств установите для них CSS по умолчанию и перестройте для меньших экранов с помощью свойства max-width.

Запутались? Выполните быструю проверку вашего сайта на реальных устройствах. Попробуйте сейчас.

Используемые контрольные точки медиазапросов

Очевидно, что легче приступить к разработке веб-сайта, зная, какие контрольные точки медиазапросов CSS использовать. Подходы, описанные выше, требуют некоторых исследований (в отношении популярных устройств и характера контента), но есть некоторые контрольные точки мультимедиа CSS, которые, вероятно, подходят для большинства веб-сайтов.

Для начала изучите популярные фреймворки, такие как Bootstrap, Foundation и Bulma.

  • Bootstrap : 576px, 768px, 992px и 1200px
  • Foundation : 40em и 64em
  • Bulma 9000 6 : 768px, 769px, 1024px, 1216px и 1408px

Эти фреймворки упрощают дизайн, ориентированный на мобильные устройства, что на данный момент является передовой отраслевой практикой. Таким образом, использование этих контрольных точек обеспечит более эффективные уровни отклика веб-сайта.

Общие контрольные точки мультимедийных запросов

Используйте контрольные точки для наиболее часто используемых разрешений устройств, используемых на мобильных устройствах, настольных компьютерах и планшетах. Это будут:

  • 1920×1080 (8,89%)
  • 1366×768 (8,44%)
  • 360×640 (7,28%)
  • 414×896 (4,58%) 9005 6
  • 1536×864 (3,88%)
  • 375×667 (3,75%)

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

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

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

Попробуйте кроссбраузерное тестирование бесплатно

Медиа-запросы в CSS. Как они работают? • Силос Креативо

89 $
Все наши премиальные темы в наборе тем

См. Темы

Медиа-запросы — это специальный синтаксис для CSS, который позволяет нам определять некоторые стили, которые будут применяться только в случае выполнения определенных условий. Мы можем уподобить их необязательным строкам кода, которые будут отображаться только для некоторых пользователей или устройств.

Медиа-запросы и адаптивный дизайн: революция в мобильном веб-дизайне

В то время, когда мобильный трафик увеличивается с каждым годом, статические веб-сайты, предназначенные для отображения в определенном разрешении, больше не нужны. (Вы помните веб-сайты, предназначенные для отображения с разрешением 600 x 480 пикселей?) Необходимо было адаптировать дизайн к определенным размерам, чтобы пользователь мог получать веб-информацию на своем устройстве без необходимости увеличивать масштаб для чтения текстов.

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

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

А поскольку менеджером дизайна в сети является CSS, появился новый элемент, способный включить эту гибкость в таблицу стилей: медиа-запросы , которые могут охватывать части кода, которые будут применяться только в соответствии с некоторыми условиями: если разрешение экрана мало, если оно очень большое, если устройство находится в горизонтальном положении…

Синтаксис медиа-запроса.

Как это работает?

Медиа-запросы действуют как контейнер для применяемых правил и селекторов, поэтому все, что начинается с открытия ключа и заканчивается его закрытием. Что касается синтаксиса, медиазапрос всегда начинается с флага @media , за которым следует медиатип . 

 @media не|только медиатип и|не|только (функция мультимедиа) {
  .мой-код {…}
}

Этот медиатип отвечает за выбор типа формата, на который распространяются эти правила. Здесь мы можем выбирать между всеми, печатными, экранными или речевыми, полезными для адаптированного и доступного оборудования.

С операторами «не» и «только» мы можем играть, чтобы сгруппировать или исключить определенный тип медиатипа.

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

Наиболее распространенные мультимедийные функции относятся к размерам экрана устройства, позволяет установить высоту и ширину, в которых они будут применяться (с высота и ширина ) или что более интересно, от какой ширины или высоты будет применяться (При мин/макс-ширина и мин/макс-высота .)

Хотя есть и более сложные, например комбинированные с ориентацией устройства ( альбомная или портретная ) или даже те, которые определяют соотношение пикселей экрана, например устройство-пиксельное соотношение , очень полезно для определения стилей и CSS для экранов сетчатки, например, некоторых iPad или iPhone. Здесь у вас есть больше информации о спецификациях.

Как работает медиа-запрос? Некоторые примеры

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

Например, мы хотим показывать определенный код только на экранах и с разрешением менее 400px. В результате получится код:

 @media screen and (max-width: 400px) { … }

Mobile first: как правильно использовать медиазапросы?

Одно из основных сомнений, возникающих при использовании медиа-запросов, заключается в том, определяем ли мы общий стиль CSS для настольных компьютеров и резервируем условные операторы для мобильных устройств или делаем это наоборот. Речь идет о трендах Desktop First и Mobile First.

Об этом давно и широко говорят, и мало кто сомневается, так как самое интересное работать с mobile first, то есть , чтобы иметь некоторые стили для мобильных устройств в качестве базового (маленькое разрешение) и постепенно расширяться, добавляя медиа-запросы для больших устройств благодаря медиатипу min-width .

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

No related posts.