Учебное пособие по Media Query CSS - стандартные разрешения, точки останова CSS и целевые размеры телефонов

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

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

Если хотите, можете посмотреть видео версию ниже:

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

Медиа-запрос - это функция CSS3, которая заставляет веб-страницу адаптировать свой макет к разным размерам экрана и типам мультимедиа.

Синтаксис

@media media type and (condition: breakpoint) { // CSS rules }

Мы можем настроить таргетинг на разные типы медиа в различных условиях. Если условие и / или типы мультимедиа соответствуют, тогда будут применяться правила внутри медиа-запроса, в противном случае - нет.

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

@ Правило СМИ

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

@media () { // CSS rules }

Скобки

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

.text { font-size: 14px; } @media (max-width: 480px) { .text { font-size: 16px; } }

Обычно размер текста составляет 14 пикселей. Однако, поскольку мы применили медиа-запрос, он изменится на 16 пикселей, если максимальная ширина устройства составляет 480 пикселей или меньше.

Важно: всегда помещайте свои медиа-запросы в конец файла CSS.

Типы СМИ

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

  • all - для всех типов носителей
  • print - для принтеров
  • экран - для экранов компьютеров, планшетов и смартфонов
  • речь - для программ чтения с экрана, которые «читают» страницу вслух

Например, когда я хочу выбрать только экраны, я устанавливаю ключевое слово screen сразу после правила @ media. Я также должен объединить правила с ключевым словом «и»:

@media screen and (max-width: 480px) { .text { font-size: 16px; } }

Контрольные точки

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

@media (max-width: 480px) { .text { font-size: 16px; } }

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

Общие точки останова: есть ли стандартное решение?

Один из наиболее часто задаваемых вопросов - «Какую точку останова мне использовать?». На рынке существует масса устройств, поэтому мы не можем и не должны определять фиксированные точки останова для каждого из них.

Вот почему мы не можем сказать, что существует стандартное разрешение для устройств, но есть несколько часто используемых точек останова в повседневном программировании. Если вы используете фреймворк CSS (например, Bootstrap, Bulma и т. Д.), Вы также можете использовать их точки останова.

Теперь давайте посмотрим на некоторые общие точки останова для ширины устройств:

  • 320–480 пикселей: мобильные устройства.
  • 481–768 пикселей: iPad, планшеты.
  • 769–1024 пикселей: маленькие экраны, ноутбуки.
  • 1025–1200 пикселей: настольные компьютеры, большие экраны.
  • 1201px и более - Очень большие экраны, ТВ

Как я сказал выше, эти точки останова могут различаться, и точно не определен стандарт, но это некоторые из наиболее часто используемых.

Подведение итогов

Адаптивный дизайн - необходимость в современном веб-дизайне и разработке. Медиа-запросы - одна из самых важных частей создания адаптивных макетов, и я надеюсь, что мой пост поможет вам понять, как работают медиа-запросы.

Если вы хотите узнать больше о веб-разработке, подпишитесь на мой канал.

Спасибо за чтение!