requêtes multimédias css3Requêtes multimédias

Explication détaillée de l'utilisation des Media Queries en CSS3 :
À l'heure actuelle, les sites Web à largeur fixe ont progressivement été remplacés par un design réactif, ce qui est une tendance inévitable.
Le design dit réactif signifie que la page peut être bien affichée quel que soit l'écran ou l'appareil utilisé (le style d'affichage de la page peut être différent selon les appareils).
La conception réactive résout les défis posés aux programmeurs par des appareils de spécifications et de formes diverses, permettant aux pages Web de s'afficher normalement, que ce soit sur des ordinateurs traditionnels, des téléphones mobiles ou des tablettes.
La conception réactive peut être bien réalisée grâce à la technologie de requête multimédia. Présentons ci-dessous la requête multimédia.
1. Requêtes multimédias en CSS2 :
En fait, il existe des applications de requêtes multimédias en CSS2, mais elles sont plus simples. Voir le code suivant :

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

Le code ci-dessus spécifie respectivement trois fichiers CSS. Pour les moniteurs, tous types d’appareils et imprimantes respectivement.
2. Comment utiliser les requêtes multimédias :
Il existe de nombreuses façons d'utiliser les requêtes multimédias, qui sont fondamentalement adaptées à l'utilisation de CSS dans la correspondance individuelle. Elles sont répertoriées comme suit :
Introduites par lien. :

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />

xml Méthode d'introduction :

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

@introduction de la méthode d'import :

@import url("css/reset.css") screen;

Utilisé dans le code CSS :

@media screen{
  选择器{
    属性：属性值；
  }
}

Utilisé sur la balise de style :

<style type="text/css" media="screen">
/*code*/
</style>

3. Règles de requête multimédia :
Les requêtes multimédias en CSS2 sont très simples et ne peuvent distinguer que les types de médias.
CSS3 a étendu la requête multimédia, qui peut non seulement être basée sur le type de média, mais également sur les attributs associés du média.
Regardez l'exemple de code suivant :

<link rel="stylesheet" media="screen and (max-width: 600px)" href="softwhy.css" />

Lorsque la largeur de la page est inférieure ou égale à 600px et appliquée à l'écran, softwhy.,css sera appelé. Règles de requête :
se compose d'un type de média, suivi d'une ou plusieurs expressions qui vérifient des conditions spécifiques (telles que la largeur minimale de l'écran).
Bien que les méthodes d'utilisation soient différentes et que les méthodes de définition des requêtes multimédias soient également différentes, comme la méthode d'attribut multimédia et la méthode @media, les règles sont les mêmes.
(1). Code simple :

@media all and (min-width:800px) {
  /*code*/
}

Tous les écrans avec une largeur d'écran horizontale minimale de 800 pixels utilisent le code CSS correspondant.
Remarque spéciale : si le type de média est all, all peut être omis, et le et après tout peut également être omis. Le code abrégé est le suivant :

 @media (min-width:800px) {
  /*code*/
}

(2).

@media (min-width:800px) and (max-width:1200px) {
  /*code*/
}

(3).et Mot clé :
et permet de préciser que les conditions doivent être remplies en même temps. Le code est le suivant :

@media screen (min-width:800px) and (max-width:1200px) {
/*code*/
}

Lorsque l'écran est. supérieur ou égal à 800px et inférieur ou égal à 1200px, le code CSS correspondant sera utilisé.
(4).or mot-clé :
or permet de préciser que tant qu'une condition est remplie, le code est le suivant :

@media screen (min-width:800px) or (orientation:portrait) {
/*code*/
}

Lorsque la taille de l'écran est approximativement égale à 800px, ou l'orientation est portrait, il utilisera le code css correspondant. Mot-clé
(5).not :
not est utilisé pour spécifier qu'il peut être établi lorsque les conditions spécifiées ne sont pas remplies.

@media not print{
/*code*/
}

Quand il ne s'agit pas d'un périphérique imprimante, utilisez le code css correspondant.