Ο κανόνας @media, που εισήχθη στο CSS2, επέτρεψε τον καθορισμό διαφορετικών κανόνων στυλ για διαφορετικούς τύπους μέσων.
Παραδείγματα: Θα μπορούσατε να έχετε ένα σύνολο κανόνων στυλ για οθόνες υπολογιστών, έναν για εκτυπωτές, ένας για φορητές συσκευές, ένας για συσκευές τύπου τηλεόρασης και ούτω καθεξής.
Δυστυχώς, αυτοί οι τύποι πολυμέσων δεν είχαν ποτέ μεγάλη υποστήριξη από συσκευές, άλλες από τον τύπο του μέσου εκτύπωσης.
Τα ερωτήματα πολυμέσων στο CSS3 επέκτειναν την ιδέα των τύπων μέσων CSS2: Αντί να αναζητάτε έναν τύπο συσκευής, κοιτάζουν την ικανότητα του συσκευή.
Τα ερωτήματα πολυμέσων μπορούν να χρησιμοποιηθούν για τον έλεγχο πολλών πραγμάτων, όπως:
πλάτος και ύψος της θύρας προβολής
πλάτος και ύψος της συσκευής
προσανατολισμός (είναι το tablet/τηλέφωνο σε οριζόντια ή κατακόρυφη λειτουργία;)
ανάλυση
Η χρήση ερωτημάτων μέσων είναι μια δημοφιλής τεχνική για την παράδοση ενός προσαρμοσμένου στυλ φύλλο σε επιτραπέζιους υπολογιστές, φορητούς υπολογιστές, tablet και κινητά τηλέφωνα (όπως τηλέφωνα iPhone και Android).
Οι αριθμοί στον πίνακα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τον κανόνα @media.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Ένα ερώτημα πολυμέσων αποτελείται από έναν τύπο μέσου και μπορεί να περιέχει έναν ή περισσότερους εκφράσεις, οι οποίες καταλήγουν είτε σε αληθές είτε σε λάθος.
@media not|only mediatype and (expressions) {
CSS-Code;
}Το αποτέλεσμα της ερώτησης είναι αληθές εάν ο καθορισμένος τύπος μέσου ταιριάζει με τον τύπο της συσκευής του εγγράφου εμφανίζεται και όλες οι εκφράσεις στο ερώτημα πολυμέσων είναι αληθείς. Όταν ένα ερώτημα πολυμέσων είναι αληθές, το αντίστοιχο φύλλο στυλ ή κανόνες στυλ είναι εφαρμόζονται, ακολουθώντας τους συνήθεις κανόνες διαδοχής.
Εκτός εάν χρησιμοποιείτε τους τελεστές όχι ή μόνο, ο τύπος μέσου είναι προαιρετικός και το Ο τύπος όλα θα υπονοείται.
Μπορείτε επίσης να έχετε διαφορετικά φύλλα στυλ για διαφορετικά μέσα:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">Χρησιμοποιείται για όλες τις συσκευές τύπου πολυμέσων
Χρησιμοποιείται για εκτυπωτές
Χρησιμοποιείται για οθόνες υπολογιστών, tablet, smartphone κ.λπ.
Χρησιμοποιείται για προγράμματα ανάγνωσης οθόνης που "διαβάζουν" τη σελίδα δυνατά
Ένας τρόπος για να χρησιμοποιήσετε τα ερωτήματα πολυμέσων είναι να έχετε μια εναλλακτική ενότητα CSS ακριβώς μέσα στο φύλλο στυλ σας.
Το παρακάτω παράδειγμα αλλάζει το χρώμα του φόντου σε ανοιχτό πράσινο εάν το Η θύρα προβολής έχει πλάτος 480 pixel ή μεγαλύτερο (εάν η θύρα προβολής είναι μικρότερη από 480 pixel, το χρώμα του φόντου θα είναι ροζ):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
Το παρακάτω παράδειγμα δείχνει ένα μενού που θα επιπλέει στα αριστερά της σελίδας εάν η θύρα προβολής έχει πλάτος 480 pixel ή μεγαλύτερο (αν η θύρα προβολής είναι μικρότερη από 480 pixel, το μενού θα βρίσκεται πάνω από το περιεχόμενο):
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
</body>
</html>
Για πολλά περισσότερα παραδείγματα ερωτημάτων πολυμέσων, μεταβείτε στην επόμενη σελίδα: Παραδείγματα CSS MQ.
Για μια πλήρη επισκόπηση όλων των τύπων μέσων και των χαρακτηριστικών/εκφράσεων, ανατρέξτε στο Κανόνας @media στην αναφορά μας στο CSS.