web-dev-qa-db-fra.com

Comment utiliser des styles CSS particuliers en fonction de la taille de l'écran/du périphérique

Bootstrap 3 a de jolies classes CSS dans les utilitaires responsive qui me permettent de masquer ou d’afficher des blocs en fonction de la résolution de l’écran http://getbootstrap.com/css/#responsive-utilities-classes

J'ai quelques règles de style dans un fichier CSS que je veux appliquer ou non en fonction de la résolution de l'écran.

Comment puis-je le faire?

Je vais minimiser tous mes fichiers CSS dans celui du déploiement en production, mais cela pourrait être évité s'il n'y avait pas d'autre solution que d'avoir des fichiers CSS séparés pour différentes résolutions d'écran.

csscss3twitter-bootstraptwitter-bootstrap-3
26
Zelid

Utilisez @media queries . Ils servent exactement ce but. Voici un exemple de leur fonctionnement:

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
}

Cela ne fonctionnerait que sur les appareils dont la largeur est égale ou inférieure à 800px.

Pour en savoir plus sur les requêtes multimédia sur Mozilla Developer Network .

55
Ranveer

La détection est automatique. Vous devez spécifier quel css peut être utilisé pour chaque résolution d'écran:

/* for all screens, use 14px font size */
body {  
    font-size: 14px;    
}
/* responsive, form small screens, use 13px font size */
@media (max-width: 479px) {
    body {
        font-size: 13px;
    }
}
4
C.P.O

J'ai créé un petit outil javascript pour styliser des éléments sur la taille de l'écran sans utiliser de requêtes multimédia ni recompiler les fichiers bootstrap css:

https://github.com/Heras/Responsive-Breakpoints

Il suffit d’ajouter la classe responsive-breakpoints à n’importe quel élément et il ajoutera automatiquement des classes xs sm md lg xl à ces éléments.

Démo: https://codepen.io/HerasHackwork/pen/rGGNEK

1
Heras

Pourquoi ne pas utiliser @ media-queries ? Celles-ci sont conçues dans ce but précis… .. Vous pouvez également le faire avec jQuery, mais ce n'est qu'un dernier recours dans mon livre.

var s = document.createElement("script");

//Check if viewport is smaller than 768 pixels
if(window.innerWidth < 768) {
    s.type = "text/javascript";
    s.src = "http://www.example.com/public/assets/css1";
}else { //Else we have a larger screen
    s.type = "text/javascript";
    s.src = "http://www.example.com/public/assets/css2";
}

$(function(){
    $("head").append(s); //Inject stylesheet
})
0
Michael Koelewijn