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
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
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
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 {
......
}
}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;
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
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
| Type de média | Description | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| tous | Tous les appareils multimédias | |||||||||||||||||||||||||
| écran | Écran couleur : ordinateurs, tablettes, smartphones... | |||||||||||||||||||||||||
| imprimer | Imprimante, aperçu avant impression | |||||||||||||||||||||||||
| parole | Périphérique utilisé : lecteur d'écran. | |||||||||||||||||||||||||
| audio | . td> | (obsolète) voix et Audio
|
||||||||||||||||||||||||
| braille | (obsolète) Dispositif de retour tactile en braille pour les aveugles | |||||||||||||||||||||||||
| gaufré | (obsolète)Imprimante braille avec pagination | |||||||||||||||||||||||||
| ordinateur de poche | (obsolète) Appareil portable : petit téléphone.. | |||||||||||||||||||||||||
| projection | (obsolète) Appareil de projection : diapositive.. | |||||||||||||||||||||||||
| tty | (obsolète) Médias utilisant une grille de lettres à densité fixe : téléscripteurs et terminaux.. | |||||||||||||||||||||||||
| tv | (obsolète) Types de téléviseurs Équipements : TV, TV Internet... |
Il existe de nombreuses fonctionnalités multimédias, et beaucoup d'entre elles ne sont pas utilisées
| 媒体类型 | 描述 |
|---|---|
| aspect-ratio | 输出设备中的页面可见区域宽度与高度的比率 |
| color | 输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |
| color-index | 在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| device-aspect-ratio | 输出设备的屏幕可见宽度与高度的比率 |
| device-height | 输出设备的屏幕可见高度 |
| device-width | 输出设备的屏幕可见宽度 |
| grid | 查询输出设备是否使用栅格或点阵 |
| height | 输出设备中的页面可见区域高度 |
| max-aspect-ratio | 输出设备的屏幕可见宽度与高度的最大比率 |
| max-color | 输出设备每一组彩色原件的最大个数 |
| max-color-index | 输出设备的彩色查询表中的最大条目数 |
| max-device-aspect-ratio | 输出设备的屏幕可见宽度与高度的最大比率 |
| max-device-height | 输出设备的屏幕可见的最大高度 |
| max-device-width | 输出设备的屏幕最大可见宽度 |
| max-height | 输出设备中的页面最大可见区域高度 |
| max-monochrome | 在一个单色框架缓冲区中每像素包含的最大单色原件个数 |
| max-resolution | 设备最大分辨率 |
| max-width | 输出设备中页面最大可见区域宽度 |
| min-aspect-ratio | 输出设备中页面可见区域宽度与高度的最小比率 |
| min-color | 输出设备每一组彩色原件的最小个数 |
| min-color-index | 输出设备的彩色查询表中的最小条目数 |
| min-device-aspect-ratio | 输出设备屏幕可见宽度与高度的最小比率 |
| min-device-width | 输出设备的屏幕最小可见宽度 |
| min-device-height | 输出设备的屏幕的最小可见高度 |
| min-height | 输出设备中的页面最小可见区域高度 |
| min-monochrome | 一个单色框架缓冲区中每像素包含的最小单色原件个数 |
| min-resolution | 设备的最小分辨率 |
| min-width | 输出设备中的页面最小可见区域宽度 |
| monochrome | 在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| orientation | 输出设备中的页面可见区域高度是否大于或等于宽度 |
| resolution | 设备的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 电视类设备的扫描工序 |
| width | 输出设备中的页面可见区域宽度 |
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!
tutoriel CSS3
Quelles sont les propriétés du dégradé CSS3 ?
Une liste complète des commandes alter dans Mysql
barre de lancement gratuite
Comment augmenter le nombre de fans de Douyin rapidement et efficacement
Introduction aux logiciels de dessin architectural
emplacement.assign
Comment vérifier si le mot de passe MySQL est oublié
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
