Utiliser un fichier CSS en fonction de la résolution avec Adapt.js

Publié le 21 avril | par Fabien Lanselle| HTML & CSS

Tous les intégrateurs connaissent la difficulté de proposer un site qui s’affiche correctement quelle que soit la résolution de l’internaute. Alors bien évidemment les uns utilisent un css qui s’adaptera aux dimensions, les autres des jeux de css en fonction du navigateur etc…

Pourquoi pas utiliser une solution qui vous permette de définir un css par type de support ou de résolution? La solution vient d’un tout petit javascript (894 bytes en minifié) qui s’intitule : Adapt.js.

Il va s’occuper de sélectionner le bon css en fonction de la résolution de l’internaute avant le rendu de la page. La configuration est on ne peut plus simple :

  range: [
    '760px            = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1920px           = fluid.css'

Un fallback est aussi disponible pour les internautes ou supports n’acceptant pas javascript. C’est le css version mobile qui est proposé en premier. Tout ceci restant valide HTML5 (via l’utilisation de la balise <noscript>).

Tout ceci est disponible sous licence GPL et MIT via Github.


A propos de l'auteur

a rédigé 262 articles sur Neoweb Mag
Fondateur et Directeur associé de Neoweb. Diplômé d'un Master en Marketing de SKEMA Business School. Passionné par le web, il est spécialisé sur des sujets comme les CMS, l'open-source et le e-marketing. Développeur occasionnel, il travaille principalement avec jQuery, Ruby on Rails ou simplement PHP.


Les commentaires sont fermés.

Retour en haut ↑