Πώς γράφετε ερωτήματα Media CSS;

Η σύνταξη για ερωτήματα μέσων πλάτους ελάχιστου πλάτους και μέγιστου εύρους μέσου πλάτους

Ο υπεύθυνος σχεδιασμός ιστοσελίδων είναι μια προσέγγιση για την οικοδόμηση ιστοσελίδων όπου οι σελίδες αυτές μπορούν να αλλάξουν δυναμικά τη διάταξη και την εμφάνισή τους με βάση το μέγεθος της οθόνης του επισκέπτη . Μεγάλες οθόνες μπορούν να λάβουν μια διάταξη κατάλληλη για αυτές τις μεγαλύτερες οθόνες, ενώ μικρότερες συσκευές, όπως τα κινητά τηλέφωνα, μπορούν να λάβουν τον ίδιο ιστότοπο μορφοποιημένο κατά τρόπο που είναι κατάλληλος για αυτή τη μικρότερη οθόνη. Αυτή η προσέγγιση παρέχει μια καλύτερη εμπειρία χρήστη για όλους τους χρήστες και μπορεί ακόμη και να βελτιώσει την κατάταξη των μηχανών αναζήτησης . Ένα σημαντικό μέρος του ανταποκρινούς σχεδιασμού ιστοσελίδων είναι τα CSS Media Queries.

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

Τα ερωτήματα των μέσων ενημέρωσης σε δράση

Πώς λοιπόν χρησιμοποιείτε τα Media Queries σε έναν ιστότοπο; Εδώ είναι ένα πολύ απλό παράδειγμα:

  1. Θα ξεκινήσετε με ένα καλά δομημένο έγγραφο HTML χωρίς οποιεσδήποτε οπτικές μορφές (αυτό είναι το CSS)
  2. Στο αρχείο CSS, θα ξεκινήσετε όπως κάνετε κανονικά, σχεδιάζοντας τη σελίδα και καθορίζοντας μια γραμμή βάσης για τον τρόπο εμφάνισης του ιστότοπου. Πείτε ότι θέλετε το μέγεθος της γραμματοσειράς της σελίδας να είναι 16 εικονοστοιχεία, θα μπορούσατε να γράψετε αυτό το CSS: body {font-size: 16px; }}
  3. Τώρα, μπορεί να θέλετε να αυξήσετε αυτό το μέγεθος γραμματοσειράς για μεγαλύτερες οθόνες που έχουν άφθονο ακίνητο για να το πράξουν. Αυτό είναι όπου το Media Queries κλωτσήσει μέσα Θα ξεκινήσετε ένα Media Query όπως αυτό: @ οθόνη μέσων και (min-width: 1000px) {}
  4. Αυτή είναι η σύνταξη ενός ερωτήματος μέσων. Αρχίζει με το @media για να δημιουργήσει το ίδιο το Query Media. Στη συνέχεια, ορίστε τον "τύπο μέσου", ο οποίος σε αυτή την περίπτωση είναι "οθόνη". Αυτό ισχύει για οθόνες επιτραπέζιου υπολογιστή, δισκία, τηλέφωνα κ.λπ. Τέλος, τερματίζετε το Media Query με τη "δυνατότητα πολυμέσων". Στο παραπάνω παράδειγμα, αυτό είναι "mid-width: 1000px". Αυτό σημαίνει ότι το Media Query θα ενεργοποιήσει τις οθόνες με πλάτος τουλάχιστον 1000 pixel.
  1. Μετά από αυτά τα στοιχεία του Media Query, προσθέτετε ένα άνοιγμα και κλείσιμο σγουρό κορμό παρόμοιο με αυτό που θα κάνατε σε οποιονδήποτε κανονικό κανόνα CSS.
  2. Το τελικό βήμα σε ένα ερώτημα μέσων είναι να προσθέσετε τους κανόνες CSS που θέλετε να εφαρμόσετε, όταν ικανοποιηθεί αυτή η προϋπόθεση. Μπορείτε να προσθέσετε αυτούς τους κανόνες CSS ανάμεσα στις σγουρές αγκύλες που συνθέτουν το Media Query, όπως αυτή: @media screen και (min-width: 1000px) {body {font-size: 20px; }}
  3. Όταν πληρούνται οι όροι του Query Media (το παράθυρο του προγράμματος περιήγησης έχει πλάτος τουλάχιστον 1000 pixel), αυτό το στυλ CSS θα εφαρμοστεί, αλλάζοντας το μέγεθος γραμματοσειράς του ιστότοπού μας από τα 16 εικονοστοιχεία που δημιουργήσαμε αρχικά στη νέα τιμή των 20 pixel.

Προσθήκη περισσότερων στυλ

Θα μπορούσατε να τοποθετήσετε όσους κανόνες CSS σε αυτό το Query Media, όπως είναι απαραίτητο, για να προσαρμόσετε την οπτική εμφάνιση του ιστότοπού σας. Για παράδειγμα, αν θέλατε όχι μόνο να αυξήσετε το μέγεθος γραμματοσειράς σε 20 εικονοστοιχεία, αλλά και να αλλάξετε το χρώμα όλων των παραγράφων σε μαύρο (# 000000), μπορείτε να προσθέσετε το εξής:

@media οθόνη και (min-width: 1000px) {body {font-size: 20px; } p {χρώμα: # 000000; }}

Προσθήκη περισσότερων ερωτημάτων μέσων

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

@media οθόνη και (min-width: 1000px) {body {font-size: 20px; } p {χρώμα: # 000000; {} οθόνη @media και (ελάχιστο πλάτος: 1400px) {body {font-size: 24px; }}

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

Ελάχιστο πλάτος και μέγιστο πλάτος

Υπάρχουν γενικά δύο τρόποι για να γράψετε ερωτήματα μέσων - χρησιμοποιώντας το "min-width" ή το "max-width". Μέχρι στιγμής, έχουμε δει "min-width" σε δράση. Αυτό προκαλεί την ενεργοποίηση των ερωτημάτων μέσων όταν το πρόγραμμα περιήγησης έχει φτάσει τουλάχιστον στο ελάχιστο πλάτος. Επομένως, ένα ερώτημα που χρησιμοποιεί "min-width: 1000px" θα ισχύει όταν το πρόγραμμα περιήγησης έχει πλάτος τουλάχιστον 1000 pixel. Αυτό το στυλ του Media Query χρησιμοποιείται όταν δημιουργείτε έναν ιστότοπο με τρόπο "κινητό πρώτο".

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

Σχετικά με τα παλαιότερα προγράμματα περιήγησης

Μια πρόκληση με τα Media Queries είναι η έλλειψη υποστήριξης σε παλαιότερες εκδόσεις του Internet Explorer. Ευτυχώς, υπάρχουν διαθέσιμα polyfills που μπορούν να καλύψουν την υποστήριξη για τα Media Queries σε αυτά τα παλαιότερα προγράμματα περιήγησης, επιτρέποντάς σας να τα χρησιμοποιήσετε σε ιστότοπους σήμερα, εξασφαλίζοντας ταυτόχρονα ότι η εμφάνιση αυτού του ιστότοπου δεν φαίνεται να έχει καταστραφεί σε παλαιότερο λογισμικό προγράμματος περιήγησης.

Επεξεργασμένο από τον Jeremy Girard την 24/1/17