CSS @media rule

Ορισμός και χρήση

Το @media rule χρησιμοποιείται σε ερωτήματα μέσων για την εφαρμογή διαφορετικών στυλ για διαφορετικούς τύπους μέσων/συσκευών.

Τα ερωτήματα μέσων μπορούν να χρησιμοποιηθούν για να ελέγξουν πολλά πράγματα, όπως:

  • Πλάτος και ύψος του οπτικού πεδίου
  • Πλάτος και ύψος του συσκευής
  • Συμπεριφορά (πάνω σε πλάτος ή ύψος οθόνης του τηλεφώνου ή της ταμπλέτας;)
  • Ανάλυση

Η χρήση ερωτημάτων μέσων είναι μια δημοφιλής τεχνική για την παροχή προσαρμοσμένων φόρμας στυλ σε δισκοπυγμή, φορητό υπολογιστή, ταμπλέτ και κινητό τηλέφωνο (responsive web design).

Μπορείτε επίσης να χρησιμοποιήσετε ερωτήματα μέσων για να καθορίσετε ότι ορισμένα στυλ ισχύουν μόνο για έγγραφα εκτύπωσης ή αναγνώστης οθόνης (mediatype: print, screen ή speech).

除了媒体类型之外，还有媒体特性。媒体特性通过允许测试用户代理或显示设备的具体特性，为媒体查询提供了更多特定细节。例如，您可以将样式仅应用于大于或小于特定宽度的屏幕。

另请参阅：

CSS 教程：Ενότητα CSS ερωτήσεις

CSS 教程：CSS 媒体查询实例

RWD 教程：通过媒体查询实现响应式 Web 设计

JavaScript 参考手册：window.matchMedia() 方法

实例

例子 1

如果浏览器窗口的宽度为 600px 或更小时，将 <body> 元素的背景颜色更改为“浅蓝色”：

@media only screen and (max-width: 600px) {
  σώμα {
    χρώμα-πίσω-γείωσης: ανοιχτό μπλε;
  }
}

δοκιμάστε το προσωπικά

可以在页面下方找到更多 TIY 实例。

CSS 语法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not、only 和 and 关键字的含义：

not：not 关键字反正整个媒体查询的含义。

only：only 关键字可防止旧版浏览器应用指定的样式，这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响。

and：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

它们都是可选的。但是，如果使用 not 或 only，则还必须指定媒体类型。

您还可以为不同的媒体使用不同的样式表，就像这样：

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

媒体类型

值 描述
all 默认。用于所有媒体类型设备。
print 用于打印机。
screen 用于计算机屏幕、平板电脑、智能手机等。
speech 用于朗读页面的屏幕阅读器。

媒体特性

值 描述
any-hover

是否存在任何可用的输入机制允许用户（如鼠标）悬停在元素上？

Προστέθηκε στο επίπεδο Media Queries 4.
any-pointer

存在任何可用的输入机制中有指针设备，如果有，它的精度如何？

Προστέθηκε στο επίπεδο Media Queries 4.
aspect-ratio Η αναλογία πλάτους και ύψους του οπτικού πεδίου (viewport).
color

Το比特 τιμή κάθε pixel του εξόδου, κοινά είναι 8, 16, 32 bits.

Το όρισμα είναι 0 αν το υλικό δεν υποστηρίζει την έξοδο χρωμάτων.
color-gamut

Η大致 υποστήριξη του χρήστη και του εξόδου για το φάσμα χρωμάτων.

Προστέθηκε στο επίπεδο Media Queries 4.
color-index

Ο αριθμός των εγγραφών του χρωματικού πίνακα αναζήτησης (color lookup table) του εξόδου.

Το όρισμα είναι 0 αν το υλικό δεν χρησιμοποιεί χρωματική αναζήτηση.
device-aspect-ratio

Η αναλογία πλάτους και ύψους του εξόδου.

Απορρίφθηκε στο Media Queries Level 4.
device-height

Το ύψος της επιφάνειας εμφάνισης του εξόδου (π.χ. οθόνη).

Απορρίφθηκε στο Media Queries Level 4.
device-width

Το πλάτος της επιφάνειας εμφάνισης του εξόδου (π.χ. οθόνη).

Απορρίφθηκε στο Media Queries Level 4.
display-mode

Η μορφή προβολής της εφαρμογής, όπως καθορίζεται από το μέλος display του manifest της web app.

display-mode
Ορίζεται στο spec του Web App Manifest.

forced-colors

Προστέθηκε στο επίπεδο Media Queries 5.
Είναι ο χρήστης που ελέγχει το χρώμα του παλέτας; grid
Είναι το υλικό grid ή pixel screen; height
Το ύψος του οπτικού πεδίου (viewport).

hover

Προστέθηκε στο επίπεδο Media Queries 4.
Είναι ο μηχανισμός εισόδου κύριος που επιτρέπει στον χρήστη να τοποθετήσει τον δείκτη του ποντικιού πάνω στο στοιχείο;

inverted-colors

Προστέθηκε στο επίπεδο Media Queries 5.
Αν το πρόγραμμα περιήγησης ή το υποκείμενο λειτουργικό σύστημα ανατρέπει τα χρώματα.

light-level

Προστέθηκε στο επίπεδο Media Queries 5.
Ο επίπεδο φωτεινότητας του περιβάλλοντος. max-aspect-ratio
Η μέγιστη αναλογία πλάτους και ύψους της περιοχής προβολής. max-color
Η μέγιστη θέση των δισεκατομμυρίων για κάθε χρωματική συνιστώσα του εξόδου. max-color-index
Ο μέγιστος αριθμός των χρωμάτων που μπορεί να εμφανιστεί το υλικό. Η μέγιστη ύψος της περιοχής προβολής, όπως το παράθυρο περιήγησης.
max-monochrome Η μέγιστη θέση των δισεκατομμυρίων για κάθε "χρώμα" σε ένα μονοχρωματικό (κουρασμένο) υλικό.
max-resolution Η μέγιστη λύση του υλικού, χρησιμοποιώντας dpi ή dpcm.
μέγιστος πλάτος Η μέγιστη πλάτος της περιοχής προβολής, όπως το παράθυρο περιήγησης.
min-aspect-ratio Η ελάχιστη αναλογία πλάτους και ύψους της περιοχής προβολής.
min-color Η ελάχιστη θέση των δισεκατομμυρίων για κάθε χρωματική συνιστώσα του εξόδου.
min-color-index Ο αριθμός των χρωμάτων που μπορεί να εμφανιστεί το υλικό.
min-height Η ελάχιστη ύψος της περιοχής προβολής, όπως το παράθυρο περιήγησης.
min-monochrome Η ελάχιστη θέση των δισεκατομμυρίων για κάθε "χρώμα" σε ένα μονοχρωματικό (κουρασμένο) υλικό.
min-resolution Η χαμηλότερη ανάλυση του εξοπλισμού, χρησιμοποιώντας dpi ή dpcm.
min-width Το ελάχιστο πλάτος της περιοχής προβολής, π.χ. το παράθυρο του προγράμματος περιήγησης.
monochrome

Η βάθος του bits του μονοχρωμικού βουforgram του εξοπλισμού για κάθε pixel.

Αν το εξοπλισμό δεν είναι μονόχρωμος οθόνη, τότε η τιμή είναι 0.
orientation Η κατεύθυνση γύρω από το οπτικό πεδίο (viewport).
overflow-block

Ο τρόπος που ο εξοπλισμός επεξεργάζεται το περιεχόμενο που υπερβαίνει το οπτικό πεδίο (viewport) κατά μήκος της οριζόντιας άξονα.

Προστέθηκε στο επίπεδο Media Queries 4.
overflow-inline

Μπορεί να κουνιέται το περιεχόμενο που υπερβαίνει το οπτικό πεδίο (viewport) κατά μήκος της παράλληλης άξονα;

Προστέθηκε στο επίπεδο Media Queries 4.
pointer

Το κύριο σύστημα εισόδου είναι ένας δείκτης εξοπλισμού; Αν ναι, ποιήτη η ακρίβεια του;

Προστέθηκε στο επίπεδο Media Queries 4.
prefers-color-scheme

Αναγνωρίζει αν ο χρήστης προτιμά να επιλέγει φωτεινά ή σκοτεινά σχήματα χρωμάτων.

Προστέθηκε στο επίπεδο Media Queries 5.
prefers-contrast

Αναγνωρίζει αν ο χρήστης ζητά να αυξήσει ή να μειώσει τη контрастτικότητα μεταξύ παρόμοιων χρωμάτων.

Προστέθηκε στο επίπεδο Media Queries 5.
prefers-reduced-motion

Αναγνωρίζει αν ο χρήστης θέλει να εμφανίζονται λιγότερες δυναμικές ενέργειες στη σελίδα.

Προστέθηκε στο επίπεδο Media Queries 5.
prefers-reduced-transparency

Αναγνωρίζει αν ο χρήστης προτιμά να επιλέγει χαμηλότερη διαφάνεια.

Προστέθηκε στο επίπεδο Media Queries 5.
resolution Η ανάλυση του εξοπλισμού, χρησιμοποιώντας dpi ή dpcm.
scan Ο τρόπος που ο εξοπλισμός επεξεργάζεται τη διαδικασία σάρωσης (υπόκειται σε τηλεόραση κ.λπ.).
scripting

Αναγνωρίζει αν είναι διαθέσιμο το scripting (π.χ. JavaScript).

Προστέθηκε στο επίπεδο Media Queries 5.
update

Η συχνότητα ενημέρωσης του περιεχομένου που ανανεώνεται από το εξοπλισμό.

Προστέθηκε στο επίπεδο Media Queries 4.
width Το πλάτος του οπτικού πεδίου (viewport).

Περισσότερες παραδείγματα

παράδειγμα 2

Όταν το πλάτος του προγράμματος περιήγησης είναι 600px ή μικρότερο, κρύψτε το στοιχείο:

@μέdia screen and (μέγιστος πλάτος: 600px) {
  div.example {
    display: none;
  }
}

δοκιμάστε το προσωπικά

παράδειγμα 3

Αν το πλάτος του οπτικού πεδίου είναι 800 εικονοστοιχεία ή μεγαλύτερο, χρησιμοποιήστε την ερώτηση μέσων για να ρυθμίσετε το χρώμα του παρασκηνίου σε αργιλοπράσινο; Αν το πλάτος του οπτικού πεδίου είναι μεταξύ 400 και 799 εικονοστοιχεία, χρησιμοποιήστε την ερώτηση μέσων για να ρυθμίσετε το χρώμα του παρασκηνίου σε αργιλοπράσινο. Αν το πλάτος του οπτικού πεδίου είναι μικρότερο από 400 εικονοστοιχεία, το χρώμα του παρασκηνίου είναι αργιλοκίτρινο:

σώμα {
  χρώμα-πίσω-γείωσης: ανοιχτό μπλε;
}
@media screen and (min-width: 400px) {
  σώμα {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  σώμα {
    background-color: lavender;
  }
}

δοκιμάστε το προσωπικά

παράδειγμα 4

Δημιουργήστε ένα αναποπτωτικό μενού πλοήγησης (σε μεγάλα οθόνες εμφανίζεται οριζόντια, σε μικρά οθόνες εμφανίζεται κάθετα):

@μέdia screen and (μέγιστος πλάτος: 600px) {
  .topnav a {
    κίνηση: ουδέτερη;
    πλάτος: 100%;
  }
}

δοκιμάστε το προσωπικά

παράδειγμα 5

Χρησιμοποιήστε τις μέσες ερωτήσεις για να δημιουργήσετε μια αναποπτωτική διάταξη κολόνων:

/* Σε οθόνες με πλάτος 992px ή μικρότερο, αλλάξτε από τέσσερις κολόνες σε δύο κολόνες */
@μέdia screen and (μέγιστος πλάτος: 992px) {
  .column {
    πλάτος: 50%;
  }
}
/* Σε οθόνες με πλάτος μικρότερο ή ίσο με 600 pixel, κάντε τα κολόνες να τοποθετούνται σε στρώματα αντί για παράλληλα */
@μέdia screen and (μέγιστος πλάτος: 600px) {
  .column {
    πλάτος: 100%;
  }
}

δοκιμάστε το προσωπικά

παράδειγμα 6

Χρησιμοποιήστε τις μέσες ερωτήσεις για να δημιουργήσετε ένα αναποπτωτικό ιστοσελίδα:

δοκιμάστε το προσωπικά

παράδειγμα 7

Οι μέσες ερωτήσεις μπορούν επίσης να χρησιμοποιηθούν για να αλλάξουν τη διάταξη της σελίδας ανάλογα με την κατεύθυνση της περιήγησης του προγράμματος περιήγησης. Μπορείτε να γράψετε ένα σύνολο ιδιοτήτων CSS που εφαρμόζονται μόνο όταν το πλάτος του παραθύρου περιήγησης είναι μεγαλύτερο από το ύψος του (δηλαδή ο προσανατολισμός "οριζόντιας οθόνης").

Αν ο προσανατολισμός βρίσκεται σε μοτίβο οριζόντιας οθόνης, χρησιμοποιήστε φωτεινό μπλε χρώμα πίσω-γείωσης:

@μέdia only screen and (προσανατολισμός: οριζόντιας οθόνης) {
  σώμα {
    χρώμα-πίσω-γείωσης: ανοιχτό μπλε;
  }
}

δοκιμάστε το προσωπικά

παράδειγμα 8

Χρησιμοποιήστε τις μέσες ερωτήσεις για να θέσετε το χρώμα του κειμένου σε πράσινο όταν το έγγραφο εμφανίζεται στην οθόνη και μαύρο όταν εκτυπώνεται:

@μέdia screen {
  σώμα {
    χρώμα: πράσινο; 
  }
}
@μέdia print {
  σώμα {
    χρώμα: μαύρο; 
  }
}

δοκιμάστε το προσωπικά

παράδειγμα 9

λίστα με ετίθευση: Χρησιμοποιήστε την κόμματα για να προσθέσετε μια άλλη μέσες ερωτήσεις σε υπάρχουσες μέσες ερωτήσεις (το behavior του είναι παρόμοιο με τον τελεστής OR):

/* Όταν το πλάτος βρίσκεται μεταξύ 600px και 900px ή είναι μεγαλύτερο από 1100px - αλλάξτε την εμφάνιση του <div> */
@μέdia screen and (μέγιστος πλάτος: 900px) and (μικρότερος πλάτος: 600px), (μικρότερος πλάτος: 1100px) {
  div.example {
    尺码-γραμματοσειράς: 50px;
    χώρος-πληρώματος: 50px;
    περιθώριο: 8px σκληρό μαύρο;
    πίσω-γείωση: κίτρινο;
  }
}

δοκιμάστε το προσωπικά

υποστήριξη προγράμματος περιήγησης

Ο αριθμός στην τаблицή σημαίνει την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τις κανόνες @media.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9