CSS Μέσα Εκφράσεως

Ο CSS2 εισήγαγε τους τύπους μέσων

Ο CSS2 εισήγαγε @media Οι κανόνες αυτοί επιτρέπουν τη διαμόρφωση διαφορετικών κανόνων στυλ για διαφορετικούς τύπους μέσων.

Για παράδειγμα: Μπορεί να έχετε ένα σύνολο κανόνων στυλ για οθόνες υπολογιστών, ένα σύνολο για εκτυπωτές, ένα σύνολο για φορητές συσκευές, και ακόμα ένα σύνολο για τηλεοράσεις, κ.λπ.

Ωστόσο, εκτός από τον τύπο μέσων τυπογραφίας, αυτοί οι τύποι μέσων δεν έχουν υποστηριχθεί σε μεγάλη κλίμακα από τα μέσα.}

Το CSS3 εισήγαγε τα ερωτήματα μέσων

Η επέκταση των ερωτημάτων μέσων στο CSS3 επεκτείνει την έννοια του τύπου μέσων του CSS2: αντί να αναζητούν τον τύπο συσκευής, επικεντρώνονται στις δυνατότητες της συσκευής.

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

  • Πλάτος και ύψος του παραθύρου
  • Πλάτος και ύψος του συσκευής
  • Συχνότητα (π.χ. tablet ή smartphone σε οριζόντια ή κάθετη κατάσταση)
  • Ανάλυση

Η χρήση των ερωτημάτων μέσων είναι μια δημοφιλής τεχνική που παρέχει προσαρμοσμένα φύλλα στυλ για υπολογιστές, laptops, tablets και smartphones (π.χ. iPhone και Android smartphones).

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

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

Ατрибούτο
@media 21.0 9.0 3.5 4.0 9.0

Γραμματική ερωτήματος μέσων

Το ερώτημα μέσων αποτελείται από έναν τύπο μέσων και μπορεί να περιέχει μια ή περισσότερες εκφράσεις, οι οποίες μπορούν να ερμηνευτούν ως αληθείς ή ψευδείς.

@media not|only τύποςμέσων και (τεκμηρίωση) {
  Κώδικας CSS;
{}

Αν ο καθορισμένος τύπος μέσων ταιριάζει με τον τύπο συσκευής του συσκευής που εμφανίζει το έγγραφο και όλες οι εκφράσεις του ερωτήματος μέσων είναι αληθείς, τότε το αποτέλεσμα της ερώτησης είναι αληθές. Όταν το ερώτημα μέσων είναι αληθές, εφαρμόζονται τα αντίστοιχα φύλλα στυλ ή κανόνες στυλ και ακολουθούν τα κανονικά κανόνια κατατάξης.

Εκτός αν χρησιμοποιείτε τους οπερατόρες not ή only, ο τύπος μέσων είναι προαιρετικός και ενσωματωμένος όλα Τύπος.

Μπορείτε επίσης να χρησιμοποιήσετε διαφορετικά φύλλα στυλ για διαφορετικά μέσα:

<link rel="stylesheet" media="τύποςμέσων και|μη|μόνο (τεκμηρίωση)" href="print.css">

Τύπος μέσων CSS3

Αξία Περιγραφή
όλα Για όλες τις τύπου συσκευές μέσων.
τυπογραφία Για εκτυπωτές.
οθόνη Για οθόνες υπολογιστών, ταμπλέτες, smartphones κ.λπ.
ακουστική Για να αναγνωρίζεται δυναμικά η σελίδα από οθόνες αναγνώστης.

Απλό παράδειγμα ερωτημάτων μέσων

Μια μέθοδος χρήσης των ερωτημάτων μέσων είναι να υπάρχει ένας εναλλακτικός τμήμα CSS εντός του φύλλου στυλών.

Η παρακάτω παράδειγμα αλλάζει το χρώμα του φόντου σε ανοιχτό πράσινο όταν η διάσταση του παραθύρου είναι 480 εικονοστοιχεία ή μεγαλύτερη (αν η διάσταση του παραθύρου είναι μικρότερη από 480 εικονοστοιχεία, το χρώμα του φόντου θα είναι ρόζο):

παράδειγμα

@media screen and (μακρύτερος-πλάτος: 480px) {
  body {
    background-color: lightgreen;
  {}
{}

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

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

παράδειγμα

@media screen and (μακρύτερος-πλάτος: 480px) {
  #leftsidebar {μέγεθος: 200px; πλεονεκτικός: αριστερά;}
  #main {μαρτία-αριστερά: 216px;}
{}

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

Περισσότερα παραδείγματα μέσων εκφράσεως

Για περισσότερα παραδείγματα μέσων εκφράσεως, παρακαλώ επισκεφθείτε την επόμενη σελίδα:Παράδειγμα CSS MQ.

Παρατηρητήριο CSS @media

Για πλήρη περιγραφή όλων των τύπων και χαρακτηριστικών/φράσεων των μέσων εκφράσεως, παρακαλώ δείτε το CSS @media Κανόνες στο Παρατηρητήριο.