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

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

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





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



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





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

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

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

Τι είναι τα Media Queries;

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



Διαβάστε περισσότερα: Το βασικό φύλλο εξαπάτησης ιδιοτήτων CSS3

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



Χρήση ερωτημάτων πολυμέσων

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

Η δομή των ερωτημάτων μέσων

Παράδειγμα δομής ερωτήματος μέσων


@media only/not media-type and (expression){
/*CSS code*/
}

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



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

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

Παράδειγμα ερωτήματος μέσων με τη μόνη λέξη -κλειδί


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

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

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

Παράδειγμα ερωτήματος προεπιλεγμένου μέσου


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Η τοποθέτηση των ερωτημάτων μέσων

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

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

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

Το εύρος των ερωτήσεων πολυμέσων

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

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

Παράδειγμα ερωτήματος μέσων tablet


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

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

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

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

Ερώτημα μέσων tablet με παράδειγμα εύρους


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

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

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

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




href='tablet.css'>


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

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

πόσο βγάζουν οι καλλιτέχνες στο spotify

Τώρα έχετε τα εργαλεία για να δημιουργήσετε αποκριτικά σχέδια

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

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

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να ορίσετε μια εικόνα φόντου στο CSS

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

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγραμματισμός
  • Ανάπτυξη διαδικτύου
  • Σχεδιασμός Ιστού
  • CSS
Σχετικά με τον Συγγραφέα Kadeisha Kean(Δημοσιεύθηκαν 21 άρθρα)

Ο Kadeisha Kean είναι προγραμματιστής λογισμικού πλήρους στοίβας και τεχνικός/συγγραφέας τεχνολογίας. Έχει την ξεχωριστή ικανότητα να απλοποιήσει μερικές από τις πιο πολύπλοκες τεχνολογικές έννοιες. παραγωγή υλικού που μπορεί να γίνει εύκολα κατανοητό από κάθε αρχάριο τεχνολογίας. Είναι παθιασμένη με τη συγγραφή, την ανάπτυξη ενδιαφέροντος λογισμικού και τα ταξίδια στον κόσμο (μέσω ντοκιμαντέρ).

Περισσότερα από τον Kadeisha Kean

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή