Detaillierte Erläuterung der tatsächlichen Verwendung von @media in CSS3

Dieses Tutorial erklärt die tatsächliche Verwendung von @media in CSS3 im Detail

Syntax:

CSS-Code kopiert Inhalte in die Zwischenablage

@media ：<sMedia> { sRules }

Wert:

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

Beschreibung:

Bestimmen Sie den Medientyp (Objekttyp), um unterschiedliche Präsentationen zu erzielen. Mit dieser Funktion kann CSS bei verschiedenen Medientypen und unterschiedlichen Bedingungen desselben Mediums (Auflösung, Farbnummer usw.) genauer arbeiten.

Kopieren Sie den Code wie folgt:

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

Gängige Schreibmethode:

CSS-Code kopiert den Inhalt in die Zwischenablage

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

@media screen und dies ist die gebräuchlichste Schreibmethode, gefolgt vom eingeschränkten Bildschirm Größe

Schreiben mit allen und nur

Im Allgemeinen erscheinen alle und nur nur zusammen

CSS-Code kopiert Inhalte in die Zwischenablage

@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 kann zur Anpassung an Geräte mit bestimmten Bildschirmseitenverhältnissen verwendet werden, was ebenfalls ein sehr nützliches Attribut ist. Unsere Seite möchte beispielsweise einen Stil für normale Bildschirme mit einem Seitenverhältnis von 4:3 definieren und dann einen anderen Stil für Breitbildschirme mit 16:9 und 16:10 definieren, z. B. adaptive Breite und feste Breite:

Verwendung:

CSS-Code kopiert Inhalte in die Zwischenablage

@media only screen and (device-aspect-ratio:4/3)

Das Obige ist eine detaillierte Erklärung der tatsächlichen Verwendung von @media in CSS3-Inhalten, z Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!