Was ist die HTML5-Medienabfrageanweisung?

Medienabfragen

- Was sind Medienabfragen?

Medienabfragen ermöglichen es uns, CSS-Stile basierend auf den Eigenschaften der Geräteanzeige festzulegen (z. B. Ansichtsfensterbreite, Bildschirmverhältnis, Geräteausrichtung: Querformat oder Hochformat). Medienabfragen bestehen aus Medientypen und einer oder mehreren Bedingungen zur Erkennung von Medieneigenschaften . Ausdruckskomposition. Medieneigenschaften, die in Medienabfragen erkannt werden können, sind width , height und color (usw.). Mithilfe von Medienabfragen können Sie den Anzeigeeffekt für bestimmte Ausgabegeräte anpassen, ohne den Seiteninhalt zu ändern.

- Die Anwendbarkeit von Medienabfragen und flexiblem Box-Layout

Medienabfragen: Am besten verwenden Sie Medienabfragen, wenn sich die Struktur der Seite ändert. Flexible Box: Wenn sich nur die Breite und Höhe ändern, versuchen Sie, die flexible Box zu verwenden. Geben Sie dann den Medientyp (auch Gerätetyp genannt) an, gefolgt von den angegebenen Medieneigenschaften (auch Geräteeigenschaften genannt). Die Schreibmethode für Medieneigenschaften ist der Schreibmethode für Stile sehr ähnlich. Sie ist hauptsächlich in zwei Teile unterteilt. Der erste Teil bezieht sich auf die Medieneigenschaften und der zweite Teil ist der durch die Medieneigenschaften angegebene Wert zwischen den beiden Teilen verwendet. Zum Beispiel:

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>

Anders als CSS-Attribute verwenden Medieneigenschaften Min/Max, um größer als gleich oder kleiner als als logische Beurteilung darzustellen, anstatt Symbole wie kleiner als (<) und größer als (>) zu verwenden. zu urteilen.

- Medientyp

alle

Breite

@media screen and (max-width:580px){
 body {
   background-color: red;
  }
}

@media screen and (min-width:900px){
  .wrapper{width: 980px;}
}

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:blue;}
}

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

@media (min-width: 700px),handheld and (orientation: landscape) { ... }

@media not print and (max-width: 1200px){样式代码}

media="only screen and (max-width:1000px)"{...}

media="screen and (max-width:1000px)"{...}

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

<link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" />