Медиа-запросы

позволяют изменять стили элементов в зависимости от ширины страницы в браузере пользователя.

Сообщить что ширина документа равна ширине экрана устройства (ontent="width=device-width) с значением 1 значащим 100%, (initial-scale=1).

<meta name="viewport" content="width=device-width, initial-scale=1">

Медиа-запрос состоит из объявления @media, all все типы устройств, пробела между and и условием в () при котором будут меняться стили элементов обозначенных в теле медиа-запроса {} . пробел между and и условием в () обязателен, т. к. без него медиа-запрос не сработает.

@media all and (max-width:588px){ .g{color:black;} }