Astuce Utiliser les media queries en JS

Dans une feuille CSS, si vous voulez appliquer un style particulier à élément, pour un petit écran, vous faites quelque chose comme ça :

@media only screen and (max-width: 36.9375em) {
    .col {
        float: none;
        width: 100%;
    }
}

Il est possible d'utiliser une syntaxe similaire en Javascript :

if (window.matchMedia != undefined
    && window.matchMedia('(max-width: 53.6875em)').matches) {
    alert('Mon écran est tout petit !').
}

Explication :

On vérifie que le navigateur comprend cette syntaxe et si oui on ajoute une condition sur la taille de la fenêtre.