Medienanfragen @media

Mit Medienabfragen können wir anhand der Geräteeigenschaften und einer Reihe von Merkmalen bestimmen, wie eine Seite gestaltet werden soll.

Grundgrammatik

@media (max-width: 1200px) {
    
     ... }

@media all (max-width: 1200px) {
    
     ... }

@media not screen (max-width: 1200px) {
    
     ... }

@media only screen (max-width: 1200px) and (min-width: 786px) {
    
     ... }

@media only screen (max-width: 1200px), (min-width: 786px) {
    
     ... }

@media only screen (max-width: 1200px), handheld and (min-width: 786px) {
    
     ... }

Medienausrüstung

• allAlle Geräte
• handheldTragbare Geräte
• printDrucker
• screenBildschirm
• tvTV-Ausrüstung

Medieneigenschaften

Den meisten Medieneigenschaften kann das Präfix „ min-oder“ vorangestellt werden, um entweder „oder“ max-auszudrücken . Die allgemeinen Eigenschaften lauten wie folgt:最低...最高...

• aspect-ratioSeitenverhältnis

• device-aspect-ratioSeitenverhältnis des Geräts

• device-heightGerätehöhe

• device-widthGerätebreite

• heighthoch

• widthBreite

• resolutionAuflösung (Pixeldichte)

• orientationRichtung

  • landscape(horizontaler Bildschirm) | portrait(vertikaler Bildschirm)

Der Fall ist wie folgt:

@media all and (orientation: portrait) {
    
     ... }

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
    
     ... }

@media screen and (min-aspect-ratio: 1/1) {
    
     ... }

@media print and (min-resolution: 300dpi) {
    
     ... }

Formular für Medienanfragen

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

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