Responsive Web design - demandes des médias
Media (médias) ont introduit une requête sur CSS3: requêtes @media CSS3 .
Utilisez @media requêtes, vous pouvez définir des styles différents pour les différents types de médias.
Exemples
Si la fenêtre du navigateur est plus petite que 500px, le fond changera en bleu clair:
body {
background-color: lightblue;
}
}
Essayez »
Ajouter un point d'arrêt
Dans le tutoriel précédent, nous utilisons les lignes et colonnes pour créer des pages web, il est sensible, mais sur le petit écran et ne pas montrer amical.
les requêtes des médias peuvent nous aider à résoudre ce problème. Nous pouvons ajouter un point d'arrêt au milieu du projet de conception, différents points d'arrêt ont des effets différents.
bureau
Les appareils mobiles
Utilisez les requêtes des médias 768px ajouter des points d'arrêt:
Exemples
Lorsque l'écran (la fenêtre du navigateur) est inférieure à 768px, la largeur de chaque colonne est de 100%:
.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 »
Priorité pour la conception terminal mobile
Priorité signifie des postes de travail finaux mobiles et d'autres dispositifs destinés à donner la priorité à la conception du terminal mobile.
Cela signifie que nous devons apporter des changements à la CSS.
Nous sélectionnons moins de 768px dans les changements de style doivent être modifiés dans le même style lorsque l'écran est plus large que 768px. Voici quelques exemples de priorité de fin mobile:
[Classe * = "collaboration"] {
largeur: 100%;
}
@media seulement écran et (min-width : 768px) {
/ * Pour le bureau: * /
.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% ;}
}
Autres points d'arrêt
Vous pouvez ajouter un point d'arrêt en fonction de leurs besoins.
Nous pouvons également les appareils tablette et téléphone mobile des points d'arrêt.
bureau
tablette
Les appareils mobiles
600px écran lors de l'ajout de requêtes de médias, et définir le nouveau style (mais moins que l'écran est plus grand que 600px 768px):
Exemples
Notez que deux styles de classe sont les mêmes, mais des noms différents (collaboration et col-m-):
[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 code ci-dessus semble plus que beaucoup, mais il peut être réglée automatiquement en fonction de la taille de l'écran de styles différents, de sorte qu'il est encore très nécessaire.
Des exemples HTML
Pour le bureau:
La première et la troisième section couvrant trois. La partie intermédiaire inter-domaine 6.
Pour les appareils de la tablette:
Le premier cross-domain 3, la deuxième section couvrant 9, la troisième partie d'un cross-domain 12:
<Class Div = "col-3 col-m-3"> ... </ div>
<Class Div = "col-6 col-m-9"> ... </ div>
<Class Div = "col-3 col-m-12"> ... </ div>
</ Div>
Direction: écran horizontal écran / vertical
Combiné avec les requêtes des médias CSS, vous pouvez créer adapter à une orientation différente de l'appareil (paysage paysage, portrait portrait, etc.) mise en page.
Syntaxe:
orientation：portrait | landscape
- portrait: spécifier le périphérique de sortie dans la région visible de la hauteur de page est supérieure ou égale à la largeur
- paysage: la valeur des circonstances inter portrait sont paysage
Exemples
Si l'arrière-plan vertical de l'écran sera bleu clair:
body {
background-color: lightblue;
}
}
Essayez »