Почему если подключать стили @media ( max-width :XXXpx ) отдельным css файлом, они работают, а если вставлять стили прям в HTML, не работают?
Есть приоритетность применения правил стилей в CSS.  Подключение стиля перегружающего текущий - надо делать после текущего, разумеется.
Короче, методом тыка и проб выяснил, что если вы решили подключать css стили прям в HTML, нужно соблюдать правильный порядок.
В начале подключаем основные стили, и только после них должны ити стили с @medi.
Иначе работать они будут через жопу.