Qu'est-ce qu'une question des médias?
requête des médias est une technique de CSS introduit dans CSS3.
Il utilise le @media règle pour inclure un bloc de propriétés CSS seulement si une certaine condition est vraie.
Exemple
Si la fenêtre du navigateur est plus petite que 500px, la couleur de fond va changer à lightblue:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Essayez - le vous - même » Ajouter un point d'arrêt
Plus tôt dans ce tutoriel, nous avons fait une page Web avec des lignes et des colonnes, et il était sensible, mais ça n'a pas l'air bien sur un petit écran.
requêtes des médias peuvent aider. Nous pouvons ajouter un point d'arrêt où certaines parties de la conception se comportent différemment sur chaque côté du point d'arrêt.
bureau
Téléphone
Utilisez une requête de médias pour ajouter un point d'arrêt à 768px:
Exemple
Lorsque l'écran (la fenêtre du navigateur) devient plus petit que 768px, chaque colonne doit avoir une largeur de 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Essayez - le vous - même » Concevez Toujours pour Mobile First
Mobile des premiers moyens de la conception pour mobile avant de concevoir pour le bureau ou tout autre appareil (Cela rendra l'affichage de la page plus rapidement sur des appareils plus petits).
Cela signifie que nous devons faire quelques changements dans notre CSS.
Au lieu de changer les styles lorsque la largeur devient plus petit que 768px, nous devrions changer la conception lorsque la largeur devient plus grande que 768px. Cela rendra notre conception mobile Première:
Exemple
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Essayez - le vous - même » un autre point d'arrêt
Vous pouvez ajouter autant de points d'arrêt que vous le souhaitez.
Nous allons également insérer un point d'arrêt entre les tablettes et les téléphones mobiles.
bureau
Tablette
Téléphone
Nous faisons cela en ajoutant une requête des médias (à 600px), et un ensemble de nouvelles classes pour les appareils de plus de 600px (mais inférieure à 768px):
Exemple
Notez que les deux ensembles de classes sont presque identiques, la seule différence est le nom ( col- et col-m- ):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
} Essayez - le vous - même » Il peut sembler étrange que nous avons deux ensembles de classes identiques, mais il nous donne l'occasion en HTML, de décider ce qui se passera avec les colonnes à chaque point d' arrêt:
HTML Exemple
Pour le bureau:
La première et la troisième section sera à la fois couvrir 3 colonnes chacune. La section du milieu enjambera 6 colonnes.
Pour les tablettes:
La première section se déroulera sur 3 colonnes, la seconde se déroulera sur 9, et la troisième section sera affichée ci-dessous les deux premières sections, et il aura une durée de 12 colonnes:
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>Orientation: Portrait / Paysage
les requêtes des médias peuvent également être utilisés pour modifier la mise en page d'une page en fonction de l'orientation du navigateur.
Vous pouvez avoir un ensemble de propriétés CSS qui appliquent uniquement lorsque la fenêtre du navigateur est plus large que sa hauteur, que l'on appelle l'orientation "paysage":