Ο ανταποκρινόμενος σχεδιασμός ιστοσελίδων είναι μια προσέγγιση για τη δημιουργία ιστοσελίδων όπου αυτές οι σελίδες μπορούν να αλλάξουν δυναμικά τη διάταξη και την εμφάνισή τους με βάση το μέγεθος της οθόνης του επισκέπτη. Οι μεγάλες οθόνες λαμβάνουν μια διάταξη κατάλληλη για αυτές τις μεγαλύτερες οθόνες, ενώ μικρότερες συσκευές, όπως τα κινητά τηλέφωνα, λαμβάνουν τον ίδιο ιστότοπο μορφοποιημένο με τρόπο κατάλληλο για αυτήν τη μικρότερη οθόνη. Αυτή η προσέγγιση παρέχει μια καλύτερη εμπειρία χρήστη για όλους τους χρήστες και μπορεί ακόμη και να βελτιώσει την κατάταξη των μηχανών αναζήτησης. Ερωτήματα πολυμέσων CSS αποτελούν σημαντικό μέρος του σχεδιασμού ιστοσελίδων που ανταποκρίνεται. Τα ερωτήματα πολυμέσων είναι σαν μικρές δηλώσεις υπό όρους μέσα στο αρχείο CSS του ιστότοπού σας, επιτρέποντάς σας να ορίσετε ορισμένους κανόνες CSS που θα τεθούν σε ισχύ μόνο όταν πληρούται μια συγκεκριμένη συνθήκη – όπως όταν ένα μέγεθος οθόνης είναι πάνω ή κάτω από ορισμένα όρια. Τα ερωτήματα πολυμέσων είναι πλέον τυπικά, αλλά οι πολύ παλιές εκδόσεις του Internet Explorer δεν τις υποστηρίζουν.
Ερωτήματα πολυμέσων σε δράση
Ξεκινήστε με ένα καλά δομημένο έγγραφο HTML χωρίς οπτικά στυλ. Στο αρχείο CSS, στυλ της σελίδας και ορίστε μια γραμμή βάσης για τον τρόπο εμφάνισης του ιστότοπου. Για να καταστήσετε το μέγεθος γραμματοσειράς της σελίδας 16 pixel, γράψτε αυτό το CSS: body {font-size: 16px; } Για να αυξήσετε αυτό το μέγεθος γραμματοσειράς για μεγαλύτερες οθόνες που διαθέτουν άφθονα ακίνητα για να το κάνουν, ξεκινήστε ένα ερώτημα πολυμέσων ως εξής: οθόνη @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 screen και (min-width: 1000px) {
σώμα {
μέγεθος γραμματοσειράς: 20px;
}
Π {
χρώμα: # 000000;
}
}
Προσθήκη περισσότερων ερωτημάτων μέσων
Επιπλέον, μπορείτε να προσθέσετε περισσότερα ερωτήματα πολυμέσων για κάθε μεγαλύτερο μέγεθος, τοποθετώντας τα στο φύλλο στυλ σας ως εξής: οθόνη @media και (ελάχιστο πλάτος: 1000 εικονοστοιχεία) {
σώμα {
μέγεθος γραμματοσειράς: 20px;
}
Π {
χρώμα: # 000000;
{
}
Οθόνη @media και (ελάχιστο πλάτος: 1400 εικονοστοιχεία) {
σώμα {
μέγεθος γραμματοσειράς: 24px;
}
}
Τα πρώτα ερωτήματα πολυμέσων ξεκινούν με πλάτος 1000 pixel, αλλάζοντας το μέγεθος της γραμματοσειράς σε 20 pixel. Στη συνέχεια, όταν το πρόγραμμα περιήγησης ήταν πάνω από 1400 pixel, το μέγεθος της γραμματοσειράς θα άλλαζε ξανά σε 24 pixel. Προσθέστε όσα ερωτήματα πολυμέσων απαιτούνται για τον συγκεκριμένο ιστότοπό σας.
Ελάχ. Πλάτος και Μέγιστο Πλάτος
Υπάρχουν γενικά δύο τρόποι για να γράψετε ερωτήματα πολυμέσων – χρησιμοποιώντας ελάχιστο πλάτος ή με μέγιστο πλάτος. Μέχρι στιγμής, έχουμε δει ελάχιστο πλάτος σε δράση. Αυτή η προσέγγιση ενεργοποιεί τα ερωτήματα πολυμέσων αφού ένα πρόγραμμα περιήγησης φτάσει τουλάχιστον στο ελάχιστο πλάτος. Έτσι, ένα ερώτημα που χρησιμοποιεί ελάχιστο πλάτος: 1000 εικονοστοιχεία ισχύει όταν το πρόγραμμα περιήγησης έχει πλάτος τουλάχιστον 1000 pixel. Αυτό το στυλ του ερωτήματος πολυμέσων χρησιμοποιείται όταν δημιουργείτε έναν ιστότοπο με τρόπο πρώτο για κινητά. Εάν χρησιμοποιείτε μέγιστο πλάτος, λειτουργεί με τον αντίθετο τρόπο. Εφαρμόζεται ένα ερώτημα πολυμέσων «μέγιστου πλάτους: 1000 εικονοστοιχεία» αφού το πρόγραμμα περιήγησης πέσει κάτω από αυτό το μέγεθος.
Αναφέρετε αυτό το άρθρο
Μορφή mla apa chicago Η αναφορά σας
Girard, Jeremy. «Πώς γράφετε ένα ερώτημα πολυμέσων CSS;» ThoughtCo, Μάιος. 14, 2021, thinkco.com/how-do-you-write-css-media-queries-3469990.
Girard, Jeremy. (2021, 14 Μαΐου). Πώς γράφετε ένα ερώτημα πολυμέσων CSS; Ανακτήθηκε από το https://www.thoughtco.com/how-do-you-write-css-media-queries-3469990
Girard, Jeremy. «Πώς γράφετε ένα ερώτημα πολυμέσων CSS;» ThoughtCo. https://www.thoughtco.com/how-do-you-write-css-media-queries-3469990 (πρόσβαση στις 29 Μαΐου 2021).
αντιγραφή παραπομπής