Comment choisir les styles CSS appropriés en fonction de la taille de l'écran/de l'appareil

Question

Bootstrap 3 possède de belles classes CSS dans l'utilitaire réactif qui peuvent masquer ou afficher certains blocs en fonction de la résolution de l'écran ;http://getbootstrap.com/css/#responsive-utilities-classes

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

Que dois-je faire ?

Je compresserais tous les fichiers CSS en un seul fichier pour le déploiement en production, mais s'il n'y a pas d'autre solution que d'utiliser des fichiers CSS séparés pour différentes résolutions d'écran.

Answer 1

La détection est automatique. Vous devez préciser le css pouvant être utilisé pour chaque résolution d'écran :

/* 对于所有屏幕，使用14px字体大小 */
body {  
    font-size: 14px;    
}
/* 响应式，对于小屏幕，使用13px字体大小 */
@media (max-width: 479px) {
    body {
        font-size: 13px;
    }
}

Answer 2

Utilisez @media pour interroger. Ils répondent exactement à ce besoin. Voici un exemple de leur fonctionnement :

@media (max-width: 800px) {
  /* 在宽度等于或小于 800px 时显示的 CSS 代码放在这里 */
}

Cela ne fonctionnera que sur les appareils d'une largeur égale ou inférieure à 800 px.

Apprenez-en davantage sur les requêtes multimédias sur le Mozilla Developer Network.