Vw и Vh или @media

Здравствуйте!
У меня с другом возник спор: что лучше vw и vh или @media-запросы?
Я утверждаю, что vw и vh можно и нужно внедрять в разработку сайтом потому, что эти величины помогают подстраивать сайту под любые разрешения экранов. По-этому я решил создать мини-сайт где эти величины будут везде
div { width: 25vw; height: 25vh; font-size: 5vw; background-color: black; color: white }

DiV

Они маштабируют блоки под все разрешение экранов, при этом сохраняя нормально расположение блоков (как на больших экранах, так и на маленьких). А @media не удобен тем, что там вручную нужно указывать все размеры, которые должны быть не устройствах. Ведь всё равно, никогда не знаешь с какого устройства зайдёт пользователь.
Мой же друг утверждает, что @media лучше, т.к. техника довольно стойкая, используется на многих сайтах и устройствах и он отлично справляется со своей обязанностью подстраиванием. А vw и vh бесполезная вещь, которая в принципе и не нужна во все. Зачем они, если подстраивать можно с помощью @media?
Так что же лучше использовать vw и vh или @media в подстройке сайта под разные экраны?

Ответ

Это совершенно разные вещи, использование которых друг другу никак не противоречит. Задание размеров чего бы то ни было в единицах vw/vh и @media-запросы имеют совершенно разные предназначения.
Используйте vw/vh, когда вам нужно единицы измерения относительно ширины/высоты экрана.
Используйте @media, когда вам нужно разные стили под разные разрешения, под разные устройства, стили чисто для печати и т.д.