Все просто, изначально вы пишите свои стили под какое-то конкретное устройство и расширение, а потом захотели, чтобы ваш сайт корректно отображался на других устройствах и расширениях, вот тут и применяете медиа запросы, переопределяя ваши стили, например, вы пишите:
@media (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
}
И теперь стили, определенные внутри {}, будут работать только для устройств, ширина которых в диапазоне от 600px до 800px включительно.
Понятное дело, что медиа запросы не ограничиваются этими свойствами, а их там вагон и маленькая тележка, но для понимания, что это такое и зачем, достаточно.
Самая толковая, на мой взгляд, "документация" по медиа запросам
тут и
тут, а
тут и
тут представлены достаточно хорошие примеры.
