# 058: Προσαρμοσμένη κεφαλίδα για το Gallery, Μέρος 2 (με ερωτήματα πολυμέσων Reverso) - CSS-Κόλπα

Anonim

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

Δεδομένου ότι τα γραφικά ανθρώπων είναι καθαρά διακοσμητικά, η χρήση σήμανσης για αυτούς δεν είναι ιδανική. Ευτυχώς υπάρχουν δύο από αυτά και έχουμε δύο δωρεάν ψευδο στοιχεία σε κάθε στοιχείο ( ::beforeκαι ::after). Χρησιμοποιούμε αυτά για να τα προσθέσουμε.

Παρουσιάζουμε μια ιδέα σε αυτό το βίντεο που θα συνεχίσει να είναι χρήσιμη, την έννοια των «ερωτήσεων μέσων αντίστροφης όψης» Εργαζόμαστε σε μεγάλο βαθμό από την επιφάνεια εργασίας σε αυτόν τον σχεδιασμό, επομένως τα ερωτήματα πολυμέσων βασίζονται κυρίως max-width. Αλλά αν δημιουργήσουμε τα ίδια ερωτήματα πολυμέσων με βάση min-width, μπορούμε να στοχεύσουμε την οθόνη μόνο όταν είναι μεγαλύτερη από ένα συγκεκριμένο μέγεθος και όχι μικρότερο.

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