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 !