Maison > interface Web > tutoriel CSS > Explication détaillée de l'utilisation réelle de @media en CSS3

Explication détaillée de l'utilisation réelle de @media en CSS3

黄舟
Libérer: 2016-12-23 15:42:32
original
2130 Les gens l'ont consulté

Ce tutoriel explique en détail l'utilisation réelle de @media en CSS3

Syntaxe :


Le code CSS copie le contenu dans le presse-papiers

@media :<sMedia> { sRules }
Copier après la connexion

Valeur :

<sMedia>:
    指定设备名称。
{sRules}:
    样式表定义。
Copier après la connexion

Description :


Déterminez le type de média (objet) pour réaliser différentes présentations. Cette fonctionnalité permet à CSS de fonctionner avec plus de précision sur différents types de médias et différentes conditions d'un même média (résolution, numéro de couleur, etc.).

Copiez le code comme suit :

media_query: [only | not]? <media_type> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width 
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome 
| resolution | min-resolution | max-resolution
| scan | grid
Copier après la connexion

Méthode d'écriture courante :

Le code CSS copie le contenu dans le presse-papiers

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/  
  .class {   
    background: #ccc;   
  }   
}
Copier après la connexion

écran @media et c'est la méthode d'écriture la plus courante, suivie de l'écran limité taille

Écrire avec tous et seulement


Généralement, tous et seulement apparaissent ensemble


Le code CSS copie le contenu dans le presse-papiers

@media all and (min-width:xxx) and (max-width:xxx){   
/*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/  
}
Copier après la connexion
@media only screen and (min-width:xxx) and (max-width:xxx){   
/*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/  
}   
device-aspect-ratio
Copier après la connexion

device-aspect-ratio peut être utilisé pour s'adapter aux appareils avec des proportions d'écran spécifiques, ce qui est également un attribut très utile. Par exemple, notre page souhaite définir un style pour les écrans ordinaires avec un rapport hauteur/largeur de 4:3, puis définir un autre style pour les écrans larges de 16:9 et 16:10, comme la largeur adaptative et la largeur fixe :

Utilisation :

Le code CSS copie le contenu dans le presse-papiers

@media only screen and (device-aspect-ratio:4/3)
Copier après la connexion

Ce qui précède est une explication détaillée de l'utilisation réelle de @media dans le contenu CSS3, veuillez faites attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal