Πώς γράφετε ένα ερώτημα πολυμέσων CSS;

Οθόνη @media και (ελάχιστο πλάτος: 1000 εικονοστοιχεία) {}

Αυτή είναι η σύνταξη ενός ερωτήματος πολυμέσων. Ξεκινά με @μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ για να δημιουργήσει το ίδιο το ερώτημα πολυμέσων. Στη συνέχεια, ορίστε τον τύπο μέσου, ο οποίος σε αυτήν την περίπτωση είναι οθόνη. Αυτός ο τύπος ισχύει για οθόνες επιτραπέζιων υπολογιστών, tablet, τηλέφωνα κ.λπ. Τερματίστε το ερώτημα πολυμέσων με το δυνατότητα μέσων. Στο παραπάνω παράδειγμά μας, δηλαδή μεσαίο πλάτος: 1000 εικονοστοιχεία. Αυτό σημαίνει ότι το ερώτημα πολυμέσων ξεκινά για οθόνες με ελάχιστο πλάτος 1000 pixel πλάτος.

Μετά από αυτά τα στοιχεία του Media Query, προσθέστε ένα άνοιγμα και κλείσιμο σγουρό στήριγμα παρόμοιο με αυτό που θα κάνατε σε οποιονδήποτε κανονικό κανόνα CSS.

Το τελευταίο βήμα για ένα ερώτημα πολυμέσων είναι να προσθέσετε τους κανόνες CSS που θα ισχύουν μετά την εκπλήρωση αυτής της συνθήκης. Εισαγάγετε αυτούς τους κανόνες CSS μεταξύ των σγουρών αγκυλών που αποτελούν το ερώτημα πολυμέσων, ως εξής:

 Οθόνη @media και (ελάχιστο πλάτος: 1000 εικονοστοιχεία) {body {font-size: 20px; }

Όταν πληρούνται οι συνθήκες του ερωτήματος πολυμέσων (το παράθυρο του προγράμματος περιήγησης έχει πλάτος τουλάχιστον 1000 εικονοστοιχεία), αυτό το στυλ CSS τίθεται σε ισχύ, αλλάζοντας το μέγεθος της γραμματοσειράς του ιστότοπού μας από τα 16 εικονοστοιχεία που δημιουργήσαμε αρχικά στη νέα μας τιμή 20 εικονοστοιχεία. 
 Προσθήκη περισσότερων στυλ 

Τοποθετήστε όσα περισσότερα Κανόνες CSS εντός αυτού του ερωτήματος πολυμέσων, όπως απαιτείται, για να προσαρμόσετε την οπτική εμφάνιση του ιστότοπού σας. Για παράδειγμα, για να αυξήσετε όχι μόνο το μέγεθος της γραμματοσειράς σε 20 pixel, αλλά και να αλλάξετε το χρώμα όλων των παραγράφων σε μαύρο (# 000000), προσθέστε αυτό: 
Οθόνη @media και (ελάχιστο πλάτος: 1000 εικονοστοιχεία) {
σώμα {
μέγεθος γραμματοσειράς: 20px;
}
Π {
χρώμα: # 000000;
}
}
 Προσθήκη περισσότερων ερωτημάτων μέσων 

Επιπλέον, μπορείτε να προσθέσετε περισσότερα ερωτήματα πολυμέσων για κάθε μεγαλύτερο μέγεθος, τοποθετώντας τα στο φύλλο στυλ σας ως εξής: 
Οθόνη @media και (ελάχιστο πλάτος: 1000 εικονοστοιχεία) {
σώμα {
μέγεθος γραμματοσειράς: 20px;
}
Π {
χρώμα: # 000000;
{
}
Οθόνη @media και (ελάχιστο πλάτος: 1400 εικονοστοιχεία) {
σώμα {
μέγεθος γραμματοσειράς: 24px;
}
}

Τα πρώτα ερωτήματα πολυμέσων ξεκινούν με πλάτος 1000 pixel, αλλάζοντας το μέγεθος της γραμματοσειράς σε 20 pixel. Στη συνέχεια, όταν το πρόγραμμα περιήγησης ήταν πάνω από 1400 pixel, το μέγεθος της γραμματοσειράς θα άλλαζε ξανά σε 24 pixel. Προσθέστε όσα ερωτήματα πολυμέσων απαιτούνται για τον συγκεκριμένο ιστότοπό σας. 
 Ελάχ. Πλάτος και Μέγιστο Πλάτος 

Υπάρχουν γενικά δύο τρόποι για να γράψετε ερωτήματα πολυμέσων - χρησιμοποιώντας ελάχιστο πλάτος ή με μέγιστο πλάτος. Μέχρι στιγμής, έχουμε δει ελάχιστο πλάτος σε δράση. Αυτή η προσέγγιση ενεργοποιεί τα ερωτήματα πολυμέσων αφού ένα πρόγραμμα περιήγησης φτάσει τουλάχιστον στο ελάχιστο πλάτος. Έτσι, ένα ερώτημα που χρησιμοποιεί ελάχιστο πλάτος: 1000 εικονοστοιχεία ισχύει όταν το πρόγραμμα περιήγησης έχει πλάτος τουλάχιστον 1000 pixel. Αυτό το στυλ του ερωτήματος πολυμέσων χρησιμοποιείται όταν δημιουργείτε έναν ιστότοπο με τρόπο πρώτο για κινητά. 

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

Αναφέρετε αυτό το άρθρο.