Ao usar min-device-width, lembre-se de definir HTML min-width

Se você optou por definir suas consultas de mídia usando min-device-width, em vez de min-width, lembre-se de definir a largura mínima para a janela de visualização com o objetivo de evitar quebrar o layout em janelas não maximizadas.

Digamos que você use esta consulta de mídia:

@media only screen and (min-device-width : 60em) {/* 960px */
    [...]
}

Se o usuário redimensionar a janela do navegador, o elemento HTML encolherá de acordo e as barras de rolagem revisarão parte do layout sem fundo ou talvez completamente vazio.

Portanto, defina a largura mínima da janela de visualização para corresponder à largura da consulta de mídia.

@media only screen and (min-device-width : 60em) {/* 960px */
    html {
        min-width: 60em;
    }
        [...]
}