Introduction détaillée aux types de médias d'attributs CSS

Avant-propos :

L'une des caractéristiques les plus importantes d'une feuille de style est qu'elle peut être utilisée sur une variété de supports, tels que des pages, des écrans, des synthétiseurs électroniques. , etc. Certaines propriétés ne peuvent fonctionner que sur des supports spécifiques. Par exemple, la propriété "font-size" ne fonctionne que sur des types de supports défilants (écran).

La déclaration d'un attribut média peut être introduite en utilisant @import ou @media :

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

Le média peut également être introduit dans la balise du document :

<link rel="stylesheet" type="text/css" media="print" href="foo.css">

(tutoriel recommandé : Tutoriel CSS)

On peut voir que la différence entre @import et @media est que le premier introduit des feuilles de style externes pour les types de médias, tandis que le second introduit directement les attributs des médias.

La méthode d'utilisation de @import consiste à ajouter l'adresse URL du fichier de feuille de style à @import, puis à ajouter le type de média. Plusieurs médias peuvent partager une feuille de style, et les types de média sont séparés par ", " séparateurs. L'utilisation de @media consiste à donner la priorité au type de média, et les autres règles sont fondamentalement les mêmes que l'ensemble de règles.

Les différents types de médias sont répertoriés ci-dessous :

ÉCRAN : Désigne l'écran de l'ordinateur.

IMPRESSION : Désigne le support opaque utilisé pour les imprimantes.

PROJECTION : désigne le projet utilisé pour l'affichage.

BRAILLE : système braille, désigne les imprimés à effets tactiles.

AURAL : désigne un synthétiseur électronique de parole.

TV : désigne les médias de type télévision.

HANDHELD : désigne un dispositif d'affichage portable (petit écran, monochrome).

TOUS : Convient à tous les supports.

Utilisation du style adaptatif du terminal mobile (terminal mobile) @media

Style de terminal mobile universel :

@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}

Style de hauteur de terminal mobile spécifié :

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960的设备}

Styles défini en fonction des différents appareils :

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

Faites attention à l'ordre si vous écrivez @media (min-width : 768px) ci-dessous, ce sera très tragique, car le fichier css est lu de haut en bas. Oui, la priorité du css suivant sera plus élevée

@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }

Car si c'est 1440, puisque 1440>768, votre 1200 sera invalide.

Donc, lorsque nous utilisons min-width, les petits sont placés 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. en bas

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

Recommandation de didacticiel vidéo connexe : tutoriel vidéo CSS

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!