Это два отдельных инструмента, которые выполняют одну задачу?
Да, они оба предназначены для адаптации страницы к размеру экрана. Разница в том, что при помощи медиа-запросов устанавливаются "переломные" точки, когда отображение страницы разительно меняется (порядок блоков, размеры, отступы и т.п.). Резиновая же верстка адаптируется не при достижении каких-то точек, а постоянно, каждый пиксель, но при этом её возможности ограничены.
Или это два инструмента, которые всегда должны работать вместе?
Эти инструменты
можно использовать вместе, но это не обязательно.
Нужно ли это делать, зависит от дизайна.
Можно сказать, что медизапросы формируют несколько холстов разного размера, а резиновая верстка отвечает за то, чтобы элементы внутри холста располагались пропорционально.
