Examen de l'utilisation de la conception de mise en page réactive CSS3

La conception réactive signifie que le style d'affichage sera différent en fonction de la résolution des différents appareils. L'attribut
　media est utilisé pour spécifier différents styles pour différents types de médias. Rendu la page quelles que soient la largeur et la hauteur du navigateur.
Syntaxe : @media mediatype et | not only (fonctionnalité média) {}
Exemple :
max-width : 600px)" href="small.css"/>
　 Résultat : Lorsque la résolution est augmentée à 600, les styles de cette feuille de style seront affichés.

Type de support :

tout pour tous les appareils

imprimé pour imprimantes et appareils d'impression

écran pour écrans d'ordinateur, tablette, smartphone.

　 　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 consemadu par l'opérateur

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 consemadue par l'opérateur

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　loguendiaire(code) |

　　　@media screen and (max-width : 600px) {　　　　 /* Faire correspondre les écrans d'ordinateur d'une largeur inférieure à 600px*/　　　}

　Le mot-clé not est utilisé pour exclure un certain type de médias institutionnels.
　　　@media not print {
　　　　/*Faire correspondre tous les appareils à l'exception des imprimantes*/

　　　}

　　only est utilisé pour spécifier un type de support spécifique.
　　　@écran multimédia uniquement et (
min-width
:
300
) et (max-width:500){　　　 /*Ce paragraphe concerne uniquement les appareils à écran couleur* /　　}Propriétés du média : (couramment utilisé)　　

　 max-width(

max-height

) : Largeur maximale et hauteur maximale

@media (max-width : 600px) { 　　　 Faire correspondre les appareils avec une largeur d'interface inférieure à 600px　　　}

　min-width(

min-height
) : largeur et hauteur minimales
@media (min-width : 400px) {
　　　 Faire correspondre les appareils avec une largeur d'interface supérieure à 400px　　　}　 Max-device-width(max-device-height) Largeur et hauteur maximales de l'appareil
@media (max-device-width : 800px) {
　　　　 Faire correspondre les appareils (pas les interfaces) avec une largeur inférieure à 800px
　　　}
　　min-device-width(min-device-height) : La largeur maximale de l'appareil et sa hauteur
　　　@media (min-device-width: 600px) {
　　　 Faire correspondre les appareils (pas les interfaces) avec une largeur supérieure à 600px
　　　}
　　orientation : écran vertical portrait
　href="indexa.css"/>
Résultat : Afficher ce style en mode portrait
Orientation :écran horizontal paysage
Formule

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!