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

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 }

Valeur :

<sMedia>：
    指定设备名称。
{sRules}：
    样式表定义。

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

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;   
  }   
}

é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是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/  
}

@media only screen and (min-width:xxx) and (max-width:xxx){   
/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/  
}   
device-aspect-ratio

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)

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 !