Partagez quelques requêtes média @media pour obtenir des résolutions clés adaptatives

Avec l'évolution des temps, il y a de plus en plus d'appareils mobiles. Autrefois, les ingénieurs front-end devaient écrire deux jeux de codes pour une page, un pour PC et un pour mobile. Mais maintenant, un seul. un ensemble de codes suffit. , car nous pouvons utiliser la requête multimédia, c'est-à-dire la méthode @media. Ensuite, je vais vous présenter plusieurs résolutions clés pour la requête multimédia @media pour parvenir à l'auto-adaptation Amis. dans le besoin peut s'y référer.

J'ai souvent des maux de tête dus à des mises en page mal alignées sur des appareils avec des résolutions différentes ou des tailles de fenêtres différentes. Vous pouvez utiliser l'écran @media pour implémenter une mise en page Web adaptative, mais comment être compatible avec tous les appareils grand public devient un problème. Quelle est la résolution lors du réglage ?

1. Regardez d'abord le code suivant, qui est parcouru à partir du bootstrap. La largeur minimale à confirmer est

768, 992 et 1200. Bien entendu, dans le passé, certains appareils avaient une largeur de 600 à 480, et nous classions ceux avec de petites résolutions comme inférieures à 767. Pourquoi est-il inférieur à 767 au lieu de 768 ? C'est parce qu'en CSS, @media (min-width : 768px) signifie que le minimum est 768, ce qui est >=768, donc nous utilisons @media ( max-. width: 767px) signifie ici

2. Utilisez @media pour réaliser plusieurs résolutions clés dans l'adaptation de pages Web

D'après ce qui précède, nous pouvons voir qu'il existe plusieurs points critiques de résolution, nous pouvons alors facilement écrire notre propre code adaptatif

@media (min-width : 768px) { //>=768 device}

@media (largeur min : 992 px){ //>=992 appareil>

@media (largeur min : 1 200) { //>=1 200 appareil>

Faites attention à l'ordre, si vous écrivez @media (min-width : 768px) ci-dessous, ce sera très tragique,

@media (min -width : 1200){ //>= 1 200 appareils🎜>

@media (largeur minimale : 992 px){ //>=992 appareils🎜>

@media (largeur min : 768 px){ //>=768 appareils >

Parce que s'il est 1440, puisque 1440>768, votre 1200 sera invalide.

Donc, lorsque nous utilisons min-width, les petits sont en haut et les grands en bas. De même, si nous utilisons max-width, les grands sont en haut et les petits en bas. le bas

@media (max-width : 1199){ //

@media (max-width : 991px){ //

@media (max-width : 767px){ //

3. Après l'apprentissage d'introduction ci-dessus, nous pouvons utiliser de manière flexible des applications hybrides avancées

Écran @media et (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} }

@media screen et ( largeur min : 960 px) et (largeur maximale : 1 199 px) { #page{ width : 960px ; }#content,.div1{width : 650px;}#secondary{width:250px}select{max-width:200px} }

@media screen et (min-width : 768px) et (max-width : 959px) { #page{ width : 900px; : 220px}sélectionnez{max-width:180px} }

@media uniquement écran et (min-width : 480px) et (max-width : 767px){ #page{ width : 450px }#content, . div1{width : 420px ; position : relative ; }#secondary{display:none}#access{width : 450px; #access a {padding-right:5px}#access a img{display:none}#rss{display : none}#branding #s{display:none} }

@media écran uniquement et (largeur maximale : 479 px) { #page{ width : 300px }#content,.div1{width : 300px ; } #secondary{display:none}#access{width: 330px;} #accéder à un {padding-right:10px;padding-left:10px}#accéder à un img{display:none}#rss{display:none}#branding # s{display:none}#access ul ul a{width:100px} }

Résumé : l'écran est utilisé dans le code ci-dessus Le moniteur est spécifié comme périphérique d'affichage, et il peut également s'agir d'autres appareils. tels que les imprimantes d'impression. Généralement, nous utilisons l'écran. Ou alors, omettez-le complètement. Si vous souhaitez voir une explication détaillée sur les médias, vous pouvez Baidu pour en savoir plus sur les requêtes multimédias.

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!