Главный блок с информацией сайта. Ширина блока будет подстраиваться не под ширину области просмотра (доступная ширина браузера), а под разрешение экрана монитора. Соответственно, при изменении ширины окна браузера, размеры блока изменяться не будут.

Поизменяйте ширину окна браузера и убедитесь, что размеры блока, а также цвет и размер шрифта при этом не изменятся.

А теперь попробуйте изменить разрешение экрана монитора, но таким образом, чтобы оно попало в другой интервал ширины, задаваемой правилом @-media (например, если разрешение вашего монитора 1366х768, измените его на время эксперимента на 1280х768). После обновления страницы изменятся размер блока, а также цвет и размер шрифта, поскольку к странице будет применена уже другая таблица стилей.

Согласитесь, первый вариант более адаптивный и лучше подстраивается не только под размеры экрана, но и под размеры области просмотра.