CSS - Media Queries: A Beginner's Guide

Привет, будущие веб-разработчики! Сегодня мы погружаемся в захватывающий мир CSS Media Queries. Как ваш доброжелательный соседский компьютерный учитель, я здесь, чтобы провести вас через это путешествие шаг за шагом. Не волнуйтесь, если вы никогда раньше не писали код - мы начнем с основ и будем двигаться вверх. Так что возьмите杯咖啡 (или чай, если это ваше дело), и давайте начнем!

Что такое Media Queries?

Прежде чем мы углубимся в детали, давайте поймем, что такое media queries. Представьте, что вы разрабатываете веб-сайт, который выглядит很好 на вашем компьютере. Но что happens, когда кто-то просматривает его на своем телефоне? Вот где media queries становятся полезными! Они позволяют вашему веб-сайту адаптироваться к различным размерам экранов и устройствам. Это как иметь сайту-хамелеона, который изменяет свой вид в зависимости от окружающей среды.

Синтаксис

Теперь давайте посмотрим на базовый синтаксис media query:

@media mediatype and (condition) {
/* CSS правила здесь */
}

Не позволяйте этому вас напугать! Мы разберем это:

• @media: Это говорит браузеру, "Эй, я собираюсь установить некоторые условия!"
• mediatype: Это specifies, какой тип медиа мы targeted (мы рассмотрим это скоро).
• and: Это то, как мы combine условия.
• (condition): Это где мы устанавливаем наши конкретные условия.

Media Types

Media types говорят браузеру, на какой тип устройства мы targeted. Вот основные из них:

Media Type	Описание
all	Применяется ко всем устройствам
print	Для打印机
screen	Для компьютерных экранов, планшетов и смартфонов

Логические операторы

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

Оператор	Описание
and	Combines несколько медиа-функций
not	Отрицание media query
only	Применяет стили только если весь запрос совпадает
,	Combines несколько media queries

CSS Media Type - All

Тип all media type как швейцарский армейский нож - он работает для всех устройств. Вот пример:

@media all {
body {
background-color: lightblue;
}
}

Это устанавливает фоновый цвет в светло-синий для всех устройств. Просто, правда?

CSS Media Type - Print

Тип print media type идеально подходит для стилизации ваших веб-страниц, когда кто-то хочет их напечатать. Давайте посмотрим на это в действии:

@media print {
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}

Это увеличивает размер шрифта для лучшей читаемости и скрывает элементы с классом no-print при печати.

CSS Media Type - Screen

Тип screen media type, вероятно, тот, который вы будете использовать чаще всего. Он предназначен для любых экранных устройств. Вот пример:

@media screen and (max-width: 600px) {
.menu {
width: 100%;
}
}

Это делает меню занимать полную ширину экрана, когда ширина экрана составляет 600 пикселей или меньше.

CSS Media Type - С запятой

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

@media screen, print {
body {
line-height: 1.5;
}
}

Это устанавливает интерлиньяж для обоих типов экрана и печати.

CSS Media Type - С "Only"

Ключевое слово only как охранник в клубе. Он ensures, что старые браузеры, которые не поддерживают media queries, не применяют стили:

@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}

CSS Media Queries - Range

Мы также можем указывать диапазоны для наших условий:

@media screen and (min-width: 600px) and (max-width: 900px) {
.sidebar {
display: none;
}
}

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

Media Features

Media features позволяют нам тестировать конкретные характеристики устройства или браузера пользователя. Вот некоторые из них:

Feature	Описание
width	Ширина окна просмотра
height	Высота окна просмотра
aspect-ratio	Соотношение между шириной и высотой
orientation	Пейзаж или портрет
resolution	Плотность пикселей устройства

Создание сложного Media Query

Давайте соберем все вместе с более сложным примером:

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
}

Это создает двухколоночный макет для экранов с ориентацией пейзаж между 600 и 900 пикселей.

CSS Media Queries - Combining Multiple Types or Features

Мы можем combine несколько типов или функций, используя оператор and:

@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
.content {
font-size: 14px;
}
}

This applies the style to screens between 600px and 900px wide, or when printing on paper up to 600px wide.

CSS Media Queries - Testing For Multiple Queries

Иногда мы хотим применить стили, если несколько запросов истинны. Мы используем запятые для этого:

@media (min-width: 600px), (orientation: landscape) {
.header {
position: sticky;
top: 0;
}
}

This makes the header sticky if the screen is at least 600px wide or in landscape orientation.

CSS Media Queries - Inverting a Query's Meaning

Ключевое слово not позволяет нам invert значение запроса:

@media not all and (orientation: landscape) {
.sidebar {
float: left;
}
}

This floats the sidebar left unless the device is in landscape orientation.

CSS Media Queries - Improving Compatibility With Older Browsers

Для старых браузеров, которые не поддерживают media queries, мы можем предоставить fallback стили:

.container {
width: 100%; /* Fallback для старых браузеров */
}

@media screen and (min-width: 600px) {
.container {
width: 80%;
}
}

This ensures a decent layout even on browsers that don't understand media queries.

И вот и все! Вы только что сделали свои первые шаги в мир адаптивного веб-дизайна с CSS Media Queries. Помните, что практика делает мастера, так что не бойтесь экспериментировать с этими концепциями. Удачи в кодировании!

Credits: Image by storyset