Comment Doit-CSS3 Media Queries-elle être Gérée?

Bien, je ne peux certainement pas la prétention d'être une autorité en la matière (je suis encore à apprendre sur les conventions de codage de moi-même), mais je penche vers l'option #1 - une seule feuille de style. Je pense à une mise en œuvre spécifique de, bien que. Au lieu d'avoir un seul point de rupture pour chaque cas de la taille de l'écran vous avez besoin de nouveaux styles pour, je vous suggère de multiples points de rupture - un pour les styles CSS de chaque module où plusieurs tailles d'écran doivent être abordées.

Ah...qui aurait pu être un peu déroutant déclaration. Un exemple est en ordre...

Plutôt que quelque chose comme:

/*default styles:*/
/*header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }
/*content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }
/*footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }
/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
/*header styles*/
.header-link{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }
/*content styles*/
.content-link{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }
/*footer styles*/
.footer-link{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }
}

Je vous suggère de l'option n ° 1, juste en œuvre de la manière suivante:

/*default header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }
/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
.header-link{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }
}
/*default content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }
/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
.content-link{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }
}
/*default footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }
/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
.footer-link{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }
}

(Toutes les classes sont des espaces réservés. Je ne suis pas très créative...)

Si cela signifie que vous allez faire la même requête de média déclaration à plusieurs reprises (conduisant à un peu plus de code), c'est beaucoup plus pratique pour l'expérimentation des modules simples, qui ensemble aider à la maintenance de votre site comme il est plus grand. Essayez d'ajouter plusieurs styles, plusieurs tags/classes/id est pour l'exemple que j'ai donné, et peut-être ajouter un peu plus d'espace à eux, et vous verrez bientôt voir comment beaucoup plus rapide, il est d'affiner et modifier/ajouter des styles (dans toutes les tailles d'écran) dans la mise en œuvre montré par la deuxième partie de l'exemple.

Et j'ai de crédit cette réponse tout à fait complètement à l'information à partir de Évolutive et Modulaire de l'Architecture pour CSS, par Jonathan Snook. (Après tout, il n'y a aucun moyen qu'un débutant comme moi serait d'être en mesure de comprendre et de raisonner une réponse comme ça par moi-même!) Comme la cité de l'une des nombreuses parties pertinentes de ce livre,

"...au lieu d'avoir un seul point de rupture, soit dans un fichier CSS ou dans un autre média de requête feuille de style, des médias de la place des requêtes à travers le module unis."

Si, par préférence personnelle ou autre, vous préférez ne pas utiliser cette approche, ensuite, vous êtes libre d'aller avec les autres options vous propose, après tout, Snook dit lui-même que son livre est plus un guide de style de cadre rigide", afin de ne pas se sentir comme ce est une norme de codage. (Bien que je sente qu'il devrait être. XD)

Si vous souhaitez utiliser la 2ème option, il y a un moyen d'éviter de "copier-coller" le mondial des styles que vous avez besoin pour votre mobile et desktop versions du site qui est veeeeeery à portée de main et vous aide à garder tout plus organisé, à mon avis, et c'est à l'aide de SASS.

Vous pourriez avoir quelque chose comme ça:

> CSS Folder
> Sass folder
- _global.scss
- _mobile_layout.scss
- _desktop_layout.scss
- main_mobile.scss
- main_desktop.scss

compiler en

> CSS Folder
- main_mobile.css
- main_desktop.css

Espère que vous la trouverez utile ^^