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

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

Η δημιουργία ιστότοπου με προσαρμόσιμη διάταξη ονομάζεται Responsive Web Design. Και τα ερωτήματα CSS Media είναι ένα από τα πιο σημαντικά μέρη του Responsive Design. Σε αυτό το άρθρο, θα ρίξουμε μια πιο προσεκτική ματιά στα ερωτήματα πολυμέσων και πώς να τα χρησιμοποιήσουμε στο CSS.

Αν προτιμάτε, μπορείτε να παρακολουθήσετε την παρακάτω έκδοση βίντεο:

Τι είναι ένα ερώτημα πολυμέσων;

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

Σύνταξη

@media media type and (condition: breakpoint) { // CSS rules }

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

Η σύνταξη μπορεί να φαίνεται περίπλοκη στην αρχή, οπότε ας εξηγήσουμε λεπτομερώς κάθε μέρος ένα προς ένα…

@ Κανόνας μέσων

Αρχίζουμε να ορίζουμε ερωτήματα πολυμέσων με κανόνα @media και αργότερα συμπεριλαμβάνουμε κανόνες CSS μέσα στα σγουρά αγκύλες. Ο κανόνας @ πολυμέσων χρησιμοποιείται επίσης για τον καθορισμό τύπων μέσων στόχευσης.

@media () { // CSS rules }

Παρένθεση

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

.text { font-size: 14px; } @media (max-width: 480px) { .text { font-size: 16px; } }

Κανονικά, το μέγεθος του κειμένου θα είναι 14 εικονοστοιχεία. Ωστόσο, δεδομένου ότι εφαρμόσαμε ένα ερώτημα πολυμέσων, θα αλλάξει σε 16 εικονοστοιχεία όταν μια συσκευή έχει μέγιστο πλάτος 480 εικονοστοιχεία ή μικρότερο.

Σημαντικό: Να τοποθετείτε πάντα τα ερωτήματα πολυμέσων σας στο τέλος του αρχείου CSS.

Τύποι μέσων

Εάν δεν εφαρμόζουμε έναν τύπο μέσου, ο κανόνας @ πολυμέσων επιλέγει όλους τους τύπους συσκευών από προεπιλογή. Διαφορετικά, οι τύποι πολυμέσων έρχονται αμέσως μετά τον κανόνα @ πολυμέσων. Υπάρχουν πολλά είδη συσκευών, αλλά μπορούμε να τα ομαδοποιήσουμε σε 4 κατηγορίες:

  • όλα - για όλους τους τύπους μέσων
  • εκτύπωση - για εκτυπωτές
  • οθόνη - για οθόνες υπολογιστών, tablet και, έξυπνα τηλέφωνα
  • ομιλία - για αναγνώστες οθόνης που «διαβάζουν» τη σελίδα δυνατά

Για παράδειγμα, όταν θέλω να επιλέξω μόνο οθόνες, θα ορίσω τη λέξη-κλειδί οθόνης αμέσως μετά τον κανόνα @ πολυμέσων. Πρέπει επίσης να συνδυάσω τους κανόνες με τη λέξη-κλειδί "και":

@media screen and (max-width: 480px) { .text { font-size: 16px; } }

ορια ΑΝΤΟΧΗΣ

Τα σημεία διακοπής είναι ίσως ο πιο κοινός όρος που θα ακούσετε και θα χρησιμοποιήσετε. Ένα σημείο διακοπής είναι το κλειδί για να καθορίσετε πότε να αλλάξετε τη διάταξη και να προσαρμόσετε τους νέους κανόνες μέσα στα ερωτήματα πολυμέσων. Ας επιστρέψουμε στο παράδειγμά μας στην αρχή:

@media (max-width: 480px) { .text { font-size: 16px; } }

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

Κοινά σημεία διακοπής: Υπάρχει τυπική ανάλυση;

Μία από τις πιο συχνές ερωτήσεις είναι "Ποιο σημείο διακοπής πρέπει να χρησιμοποιήσω;". Υπάρχει ένας τόνος συσκευών στην αγορά, έτσι δεν μπορούμε και δεν πρέπει να καθορίσουμε σταθερά σημεία διακοπής για καθεμία από αυτές.

Γι 'αυτό δεν μπορούμε να πούμε ότι υπάρχει μια τυπική ανάλυση για συσκευές, αλλά υπάρχουν μερικά κοινά σημεία διακοπής στον καθημερινό προγραμματισμό. Εάν χρησιμοποιείτε ένα πλαίσιο CSS (όπως Bootstrap, Bulma κ.λπ.) μπορείτε επίσης να χρησιμοποιήσετε τα σημεία διακοπής τους.

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

  • 320px - 480px: Κινητές συσκευές
  • 481 εικονοστοιχεία - 768 εικονοστοιχεία: iPad, tablet
  • 769 εικονοστοιχεία - 1024 εικονοστοιχεία: Μικρές οθόνες, φορητοί υπολογιστές
  • 1025px - 1200px: Επιτραπέζιοι υπολογιστές, μεγάλες οθόνες
  • 1201px και περισσότερα - Εξαιρετικά μεγάλες οθόνες, τηλεόραση

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

Τυλίγοντας

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

Αν θέλετε να μάθετε περισσότερα για την ανάπτυξη ιστού, μη διστάσετε να εγγραφείτε στο κανάλι μου.

Ευχαριστούμε που το διαβάσατε!