Πώς να χρησιμοποιήσετε ερωτήματα πολυμέσων σε HTML και CSS για να δημιουργήσετε αποκριτικούς ιστότοπους

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

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

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

Κατανόηση του Responsive Design

Με λίγα λόγια, ο αποκριτικός σχεδιασμός ασχολείται με τη χρήση HTML / CSS για τη δημιουργία μιας διάταξης ιστότοπου / εφαρμογής ιστού που προσαρμόζεται σε διάφορα μεγέθη οθόνης. Στο HTML / CSS υπάρχουν μερικοί διαφορετικοί τρόποι για να επιτευχθεί η ανταπόκριση σε ένα σχεδιασμό ιστότοπου:

• Χρήση μονάδων rem και em αντί για pixel (px)
• Ρύθμιση της θύρας προβολής / κλίμακας κάθε ιστοσελίδας
• Χρήση ερωτημάτων πολυμέσων

Ένα ερώτημα πολυμέσων είναι μια δυνατότητα του CSS που κυκλοφόρησε στην έκδοση CSS3. Με την εισαγωγή αυτής της νέας δυνατότητας οι χρήστες του CSS αποκτούν τη δυνατότητα προσαρμογής της εμφάνισης μιας ιστοσελίδας με βάση το ύψος, το πλάτος και τον προσανατολισμό μιας συσκευής / οθόνης (οριζόντια ή κατακόρυφη λειτουργία).

Διαβάστε περισσότερα: The Essential CSS3 Properties Cheat Sheet

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

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

Μόνο για @ / όχι τύπο μέσου και (έκφραση) {
/ * Κωδικός CSS * /
}

Η γενική δομή ενός ερωτήματος πολυμέσων περιλαμβάνει:

• Η λέξη-κλειδί @media
• Η λέξη-κλειδί όχι / μόνο
• Τύπος πολυμέσων (που μπορεί να είναι είτε οθόνη, εκτύπωση ή ομιλία)
• Η λέξη-κλειδί "και"
• Μια μοναδική έκφραση που περικλείεται σε παρένθεση
• Ο κωδικός CSS περικλείεται σε ένα ζευγάρι ανοιχτών και κλειστών σγουρών τιράντες.

Σχετιζομαι με: Χρήση CSS για τη μορφοποίηση εγγράφων για εκτύπωση

Οθόνη μόνο για μέσα ενημέρωσης και (μέγιστο πλάτος: 450 εικονοστοιχεία) {
σώμα{
χρώμα φόντου: μπλε;
}
}

Το παραπάνω παράδειγμα εφαρμόζει το στυλ CSS (ειδικά ένα μπλε χρώμα φόντου) σε μόνο οθόνες συσκευών που έχουν πλάτος 450 εικονοστοιχεία και κάτω - έτσι βασικά σε smartphone. Η λέξη-κλειδί «μόνο» μπορεί να αντικατασταθεί με τη λέξη-κλειδί «όχι» και, στη συνέχεια, το στυλ CSS στο ερώτημα πολυμέσων παραπάνω θα ισχύει μόνο για εκτύπωση και ομιλία.

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

/ * σχεδιασμός για smartphone * /
@media (μέγιστο πλάτος: 450 εικονοστοιχεία) {
σώμα{
χρώμα φόντου: μπλε;
}
}

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

Η εσωτερική μέθοδος περιλαμβάνει την προσθήκη του

Η εξωτερική μέθοδος περιλαμβάνει τη δημιουργία ενός ερωτήματος πολυμέσων σε ένα εξωτερικό αρχείο CSS και τη σύνδεσή του με το αρχείο HTML μέσω του ετικέτα.

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

Ο προεπιλεγμένος κωδικός ερωτήματος πολυμέσων που έχουμε παραπάνω στοχεύει smartphone (πλάτος 450 και κάτω), οπότε αν θέλετε να ορίσετε ένα διαφορετικό υπόβαθρο για tablet που ίσως νομίζετε ότι θα μπορούσατε απλά να προσθέσετε τον ακόλουθο κώδικα στο προϋπάρχον αρχείο CSS.

/ * σχεδιασμός για δισκία * /
@media (μέγιστο πλάτος: 800 εικονοστοιχεία) {
σώμα{
χρώμα φόντου: κόκκινο;
}
}

Το μόνο πρόβλημα είναι ότι, λόγω της σειράς προτεραιότητας, τα tablet θα έχουν κόκκινο χρώμα φόντου και τα smartphone θα έχουν επίσης κόκκινο χρώμα φόντου επειδή τα 450 εικονοστοιχεία και κάτω είναι κάτω από 800 εικονοστοιχεία.

Ένας τρόπος για την επίλυση αυτού του μικρού προβλήματος θα ήταν να προσθέσετε το ερώτημα πολυμέσων για tablet πριν από αυτά για smartphone. το τελευταίο θα αντικαταστήσει το πρώτο και θα έχετε τώρα smartphone με μπλε χρώμα φόντου και tablet με κόκκινο χρώμα φόντου.

Ωστόσο, υπάρχει ένας καλύτερος τρόπος για να επιτύχετε ξεχωριστό στυλ για smartphone και tablet χωρίς να ανησυχείτε για τη σειρά προτεραιότητας. Πρόκειται για μια δυνατότητα ερωτημάτων πολυμέσων γνωστή ως προδιαγραφή εύρους, όπου ο προγραμματιστής μπορεί να δημιουργήσει ένα ερώτημα πολυμέσων με το μέγιστο και ελάχιστο πλάτος (το εύρος).

/ * σχεδιασμός για δισκία * /
@media (μέγιστο πλάτος: 800 εικονοστοιχεία) και (ελάχιστο πλάτος: 451) {
σώμα{
χρώμα φόντου: κόκκινο;
}
}

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

Εάν δεν θέλετε να ενσωματώσετε ερωτήματα πολυμέσων στον κώδικα CSS, υπάρχει μια εναλλακτική μέθοδος που μπορείτε να χρησιμοποιήσετε. Αυτή η μέθοδος περιλαμβάνει τη χρήση ερωτημάτων πολυμέσων στο ετικέτα ενός αρχείου HTML, οπότε αντί να έχει ένα τεράστιο φύλλο στυλ που περιέχει τις προτιμήσεις στυλ για smartphone, tablet και υπολογιστές — θα μπορούσατε να χρησιμοποιήσετε τρία ξεχωριστά αρχεία CSS και να δημιουργήσετε τα ερωτήματα πολυμέσων σας ο ετικέτα.

ο Η ετικέτα είναι ένα στοιχείο HTML που χρησιμοποιείται για την εισαγωγή στυλ CSS από ένα εξωτερικό φύλλο στυλ. Αυτή η ετικέτα έχει μια ιδιότητα πολυμέσων που λειτουργεί με τον ίδιο τρόπο όπως ένα ερώτημα πολυμέσων στο CSS.

 κύριο φύλλο στυλ 

 φύλλο στυλ tablet 
href = "tablet.css">
 φύλλο στυλ smartphone 

Ο παραπάνω κωδικός πρέπει να τοποθετηθεί στο

ετικέτα του αρχείου HTML. Τώρα το μόνο που χρειάζεται να κάνετε είναι να δημιουργήσετε τρία ξεχωριστά αρχεία CSS με τα ονόματα αρχείων main.css, tablet.css και smartphone.css — και στη συνέχεια δημιουργήστε τη συγκεκριμένη σχεδίαση που θα θέλατε για κάθε συσκευή.

Το στυλ στο κύριο αρχείο θα εφαρμοστεί σε όλες τις οθόνες με πλάτος μεγαλύτερο από 800 εικονοστοιχεία, θα εφαρμοστεί το στυλ στο αρχείο tablet σε όλες τις οθόνες με πλάτος μεταξύ 450 και 801 εικονοστοιχείων και το στυλ στο αρχείο smartphone θα ισχύει για όλες τις παρακάτω οθόνες 451 εικονοστοιχεία.

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

Πιστωτική εικόνα: Αρνητικός χώρος /Πεξέλ

Πώς να ορίσετε μια εικόνα φόντου σε CSS

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

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα