Поддержка в разных браузерах различается.

Проверьте ссылку

Firefox :Черный с белым текстом.

Opera, Chrome, IE9 :Синий с черным текстом.

Что правильно и как мне сделать это последовательным?

Код

@media screen and (min-width: 480px) {

    body{
        background-color:#6aa6cc;
        color:#000;    
    }

    @media screen and (min-width: 768px) {

        body{
            background-color:#000;
            color:#fff;    
        }
    }
}

Интересно, что вложение медиа-запросов в условное выражение @importдействительно работает.

например:

Index.html

    
    
    


    
Why is this not consistent.

импортер.css

@import url(media.css) screen and (min-width: 480px);

media.css

body {
    background-color: #6aa6cc;
    color: #000;
}

@media screen and (min-width:768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}