9 Προηγμένα κόλπα CSS ερωτημάτων πολυμέσων που πρέπει να γνωρίζετε

Μια αξιοποιήσιμη, προσβάσιμη εμπειρία είναι ζωτικής σημασίας για έναν επιτυχημένο ιστότοπο. Εάν οι αναγνώστες σας έχουν θετική εμπειρία, είναι πιο πιθανό να πραγματοποιήσουν μια παρότρυνση για δράση, συμπεριλαμβανομένης της αγοράς προϊόντων. Είναι επίσης πιο πιθανό να επιστρέψουν ή να προτείνουν τον ιστότοπό σας σε άλλους. Η εμπειρία είναι το κλειδί.

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

1. Το χαρακτηριστικό του δείκτη

ο Κανόνας @media έχει μια λειτουργία δείκτη που σας επιτρέπει να προσαρμόσετε το σχέδιό σας με βάση την κύρια συσκευή κατάδειξης. Μπορείτε να δοκιμάσετε τη διαθεσιμότητα και την ποιότητα.

Αυτός ο δείκτης δυνατότητα αναζήτησης μέσων παίρνει μία από τις τρεις τιμές: καμία, χονδροειδής ή ψιλή. ο

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

Χρήση της δυνατότητας δείκτη

Επιλογές για να επιλέξετε από: 
 Επιλογή 1
 Επιλογή Δεύτερη

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

Ένας υπολογιστής που διαθέτει ακριβή (ή υψηλής ποιότητας) κύρια συσκευή κατάδειξης θα εμφανίσει την ακόλουθη ιστοσελίδα:

Ένας υπολογιστής που έχει μια κύρια συσκευή με περιορισμένη ακρίβεια (ή χαμηλή ποιότητα) θα εμφανίσει την ακόλουθη ιστοσελίδα:

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

2. Η δυνατότητα οποιουδήποτε δείκτη

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

Χρήση της δυνατότητας οποιουδήποτε δείκτη

 @media (οποιοσδήποτε δείκτης: ωραία) {
 είσοδος[type="radio"] {
 πλάτος: 15 px;
 ύψος: 15 px;
 περίγραμμα-ακτίνα: 20px;
 πλάτος περιγράμματος: 1px;
 }
 }
@μέσα (οποιοσδήποτε δείκτης: χονδροειδής) {
 είσοδος[type="radio"] {
 πλάτος: 25 px;
 ύψος: 25 px;
 περίγραμμα-ακτίνα: 20px;
 πλάτος περιγράμματος: 2 px;
 }
 }

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

3. Το χαρακτηριστικό hover

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

Χρήση της δυνατότητας αιώρησης

 /* CSS */
 ένα{
 κείμενο-διακόσμηση: κανένα;
 χρωμα μαυρο;
 }
 @media (hover: hover) {
 α: αιώρηση {
 χρώμα: μπλε;
 }
 }
 HTML 
 Ένα στοιχείο σύνδεσης

Ο παραπάνω κωδικός θα εμφανίσει ένα στοιχείο. Θα αλλάξει χρώμα (από μαύρο σε μπλε) κάθε φορά που ο κύριος μηχανισμός εισόδου μιας συσκευής (που υποστηρίζει την αιώρηση) αιωρείται πάνω της.

4. Η λειτουργία any-hover

ο οποιοδήποτε αιωρούμενο Το ερώτημα μέσων στοχεύει οποιονδήποτε μηχανισμό εισόδου, συμπεριλαμβανομένου του κύριου μηχανισμού εισαγωγής.

Χρήση της δυνατότητας any-hover

@media (any-hover: hover) {
 α: αιώρηση {
 χρώμα: μπλε;
 }
 }

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

5. Η δυνατότητα ανάλυσης

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

Η δυνατότητα ανάλυσης χρησιμοποιεί εύρος. Αυτό σημαίνει ότι εκτός από τη χρήση του ανάλυση λέξη-κλειδί, μπορείτε να χρησιμοποιήσετε ελάχιστη ανάλυση και μέγιστη ανάλυση. Η δυνατότητα ανάλυσης ερωτήματος πολυμέσων ανήκει στον τύπο δεδομένων ανάλυσης. Αυτό σημαίνει ότι η δυνατότητα ανάλυσης είναι μετρήσιμη σε μία από τις τρεις μονάδες: κουκκίδες ανά ίντσα (dpi), κουκκίδες ανά εκατοστό (dpcm) ή κουκκίδες ανά pixel (dppx).

Χρήση της δυνατότητας ανάλυσης

/* CSS */
@media (ελάχιστη ανάλυση: 72dpi) {
 Π {
 άσπρο χρώμα;
 Χρώμα φόντου: μπλε;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Η χαμηλότερη ανάλυση που μπορεί να έχει μια συσκευή και εξακολουθεί να εμφανίζει εικόνες ποιότητας είναι 72dpi. Έτσι, εάν μια συσκευή έχει ανάλυση 72dpi ή μεγαλύτερη, θα εμφανίσει την ακόλουθη έξοδο στο πρόγραμμα περιήγησής της:

6. Το χαρακτηριστικό προσανατολισμού

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

Χρήση της δυνατότητας προσανατολισμού

/* CSS */
 σώμα{
 οθόνη: flex;
 }
 Ενότητα{
 περίγραμμα: 2 εικονοστοιχεία συμπαγές μπλε.
 padding: 3px;
 περιθώριο: 3px;
 }
 @μέσα (προσανατολισμός: τοπίο) {
 σώμα {
 flex-direction: σειρά;
 }
 }
@μέσα (προσανατολισμός: πορτραίτο) {
 σώμα {
 flex-direction: στήλη;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Ο παραπάνω κώδικας αλλάζει τη διάταξη μιας βάσης ιστοσελίδας με βάση τον προσανατολισμό μιας συσκευής.

Μια συσκευή με θύρα προβολής σε οριζόντια λειτουργία θα εμφανίσει την ακόλουθη ιστοσελίδα:

Μια συσκευή με θύρα προβολής σε κατακόρυφη λειτουργία θα εμφανίσει την ακόλουθη ιστοσελίδα:

7. Το χαρακτηριστικό του ύψους

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

Χρήση της δυνατότητας ύψους

 /* CSS */
 @μέσα (ελάχ. ύψος: 360 εικονοστοιχεία) {
 Π{
 περίγραμμα: 2 εικονοστοιχεία με πορτοκαλί κουκκίδες.
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Ο παραπάνω κώδικας προσαρμόζει αυτό που βλέπει ένας χρήστης με βάση το ύψος της συσκευής του. Οι χρήστες με ύψος συσκευής 360 px και άνω θα δουν κάτι παρόμοιο με την ακόλουθη ιστοσελίδα:

Οι συσκευές με ύψος κάτω από 360 εικονοστοιχεία δεν θα εμφανίζουν το περίγραμμα γύρω από την παράγραφο στην ιστοσελίδα.

8. Το χαρακτηριστικό πλάτους

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

Χρήση της δυνατότητας πλάτους

 /* CSS */
 @μέσα (ελάχ. πλάτος: 600 εικονοστοιχεία) {
 Π{
 περίγραμμα: 2 εικονοστοιχεία συμπαγές μωβ.
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Ο παραπάνω κώδικας προσαρμόζει αυτό που βλέπει ένας χρήστης με βάση το πλάτος της συσκευής του. Οι χρήστες με πλάτος συσκευής 600 px και άνω θα δουν κάτι σαν την ακόλουθη ιστοσελίδα:

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

9. Το χαρακτηριστικό χρώμα

Η δυνατότητα ερωτήματος έγχρωμων μέσων αξιολογεί το στοιχείο χρώματος μιας συσκευής (κόκκινο, πράσινο, μπλε). Η τιμή αναφέρεται στο πόσα bit χρησιμοποιεί μια οθόνη για κάθε στοιχείο, το οποίο καθορίζει πόσα διαφορετικά χρώματα μπορεί να εμφανίσει. Οι σύγχρονες συσκευές χρησιμοποιούν συνήθως μια οθόνη 24-bit που χρησιμοποιεί οκτώ bit ανά έγχρωμο στοιχείο. Παίρνει επίσης μια ακέραια τιμή, όπου μια άχρωμη συσκευή είναι μηδέν.

Το χαρακτηριστικό χρώμα χρησιμοποιεί επίσης το ελάχ. χρώμα και μέγ. χρώμα σειρές.

Χρήση της λειτουργίας χρώματος

 /* CSS */
 @μέσα (ελάχ. χρώμα: 7) {
 Π{
 περίγραμμα: 2px σταθερό πράσινο.
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Οι συσκευές με έγχρωμο στοιχείο επτά και άνω θα εμφανίζουν την ακόλουθη έξοδο στα προγράμματα περιήγησής τους:

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

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

Τα ερωτήματα πολυμέσων δεν είναι τα μόνα εργαλεία CSS που μπορούν να ενισχύσουν τις δεξιότητες προγραμματιστή σας.

8 Βασικές συμβουλές και κόλπα για το CSS που πρέπει να γνωρίζει κάθε προγραμματιστής

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

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