Utilisez notre CSS3 pour implémenter une mise en page réactive

Il ne suffit pas d'avoir une boîte flexible
CSS3 étend également l'attribut media, en ajoutant Une fonction de module
Media QueriesMedia QueriesFonction

Media Queries est introduite

Avec la popularité rapide des terminaux mobiles
de plus en plus d'utilisateurs utilisent des smartphones, tablettes, etc.
Le tout en tenant compte des besoins des utilisateurs
Nous devons nous assurer que les utilisateurs ont une bonne expérience de navigation sur la page sur différents appareils
De cette façon, nous avons besoin de requêtes multimédias
Cela nous permet de Différents appareils ou appareils avec des conditions différentes ont des styles différents
Cependant, si le terminal mobile a des besoins très importants
il est préférable de développer une page spéciale pour le terminal mobile
Jetons un coup d'œil à l'introduction des requêtes multimédias Méthode

La requête Media charge sélectivement les fichiers

Tout d'abord, jetons un coup d'œil à la méthode link
Voici comment cela se fait en CSS2
Utilisez la balise link et l'attribut media pour introduire feuilles de style différentes (Si les conditions sont remplies)

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

Deux concepts sont introduits ici
L'un est Type de média (Type de média), et l'écran ici
Un est Media Characteristics (Media Query), la largeur maximale ici : 600px

Media Query est une version améliorée du Media Type de CSS3
En fait, Media Query peut être considéré comme Media Type (condition de jugement) + CSS (conformité Règles de style conditionnelles)

La traduction de ce code est
Si le support média est un type d'écran et que la largeur de la fenêtre est ≤ 600px, introduisez le style demo.css fichier

La requête multimédia est facultativement ajoutée Style

Ce que nous faisons dans CSS3 est d'utiliser les règles @media pour ajouter différents styles dans les fichiers CSS
Par rapport au lien, cela peut réduire les demandes de page et a de meilleurs résultats

@media screen and (max-width: 600px) {    .demo1 {        ......
    }
    .demo2 {
        ......
    }
}

Introduction d'autres requêtes média

Il existe de très nombreuses requêtes média, nous n'avons pas besoin d'en savoir beaucoup
Les deux seules requêtes couramment utilisées sont ce qui précède
@import peut également utiliser des requêtes multimédias

@import url(demo.css) screen;

Utilisations des requêtes multimédias

Si nous voulons spécifier plusieurs propriétés multimédias
, utilisez simplement le mot-clé et
La spécification de la partie propriétés du média doit utiliser des crochets

media="screen and (min-width: 601px) and (max-width: 800px)"

Le style est appliqué dans les écrans de 601 px entre ~ 800 px

la requête média n'a pas ni ne spécifie de fonctionnalité multimédia alternative, mais nous pouvons utiliser des styles de liste séparés par des virgules

media="screen and (min-width: 601px), print and (min-width: 6in)"

à appliquer sur des écrans 601px+ ou utiliser au moins 6 équipements d'impression pour du papier d'une largeur d'un pouce

Les requêtes multimédias peuvent spécifier des conditions négatives
Nous devons utiliser le mot-clé pas au début de la déclaration aux médias
Notez qu'il ne peut pas être déclaré séparément avant une seule condition, cela n'annulera pas l'intégralité de la déclaration aux médias

media="not screen and (min-width: 600px) and (max-width: 800px)"

Le style est appliqué aux écrans qui ne sont pas compris entre 600px et 800px

En plus du mot-clé not, il existe également un seul
qui utilise Pour masquer les requêtes multimédias des premiers navigateurs
est similaire à non et doit être déclaré au début de la déclaration de déclaration des médias
telle que cette déclaration

media="screen and (min-width: 601px) and (max-width: 800px)"

Les premiers navigateurs ne peuvent la mettre que comme media="screen"
Puisqu'il ne comprend pas les propriétés des médias , il appliquera des règles de style à tous les appareils à écran
mais en utilisant le seul mot-clé

media="only screen and (min-width: 601px) and (max-width: 800px)"

les navigateurs antérieurs le comprendront Pour media="only"
mais le seul type de média n'existe pas, donc il n'appliquera aucun style
Implémentation de la fonction de masquage des requêtes multimédias des navigateurs précédents

Types de médias et propriétés des médias

Type de média

Bien qu'il existe de nombreux mots-clés pour les médias tapez, la plupart d'entre eux ont été abandonnés (qui les utilise)
Les plus couramment utilisés sont tous, sérigraphiés et imprimés

Fonctionnalités multimédias

Il existe de nombreuses fonctionnalités multimédias, et beaucoup d'entre elles ne sont pas utilisées

Veillez à faire la distinction entre la largeur/hauteur de l'appareil et la largeur/hauteur
largeur/hauteur de l'appareil est la largeur de l'appareil (pas la largeur du navigateur)
largeur/hauteur est la taille de la fenêtre de notre navigateur
Utiliser documentElement.clientWidth/ clientHeight qui est valeur de la fenêtre d'affichage

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!