Ο υπεύθυνος σχεδιασμός είναι παντού και αν χρησιμοποιείτε ένα πλαίσιο ή γράφετε τα ερωτήματα των μέσων σας, ορισμένα στοιχεία στη σελίδα σας είναι υποχρεωμένα να μετακινούνται ή να κλιμακώνουν.
Εάν τα ερωτήματα μέσων βασίζονται στις διαστάσεις του προγράμματος περιήγησης και το μέγεθος του προγράμματος περιήγησης έχει αλλάξει, τότε τα στοιχεία σας θα μεταπηδήσουν στη θέση τους. Προσθέτοντας ένα μικρό animation σε αυτές τις ιδιότητες είναι μια ωραία πινελιά για κάθε ανταποκριτική τοποθεσία.
Σήμερα, θα σας δείξω πόσο εύκολο είναι να προσθέσετε αυτή την επιπλέον αφή, εμψυχώντας το πλάτος και την αδιαφάνεια των στοιχείων μεταξύ των ερωτημάτων των μέσων ενημέρωσης.
Για αυτό το απλό παράδειγμα θα χρησιμοποιήσουμε ένα div, που περιέχει 3 μικρότερες διαιρέσεις. Οι διαιρέσεις θα κλιμακώνονται ανάλογα με το μέγεθος του παραθύρου του προγράμματος περιήγησης. Το HTML είναι απλό:
Τώρα, το κύριο CSS θα τοποθετήσει τα τρία κουτιά μέσα στο κύριο div και επίσης, σύμφωνα με ένα περιθώριο στα δεξιά:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}Αυτή είναι η κύρια διάταξη μας, χωρίς ερωτήματα μέσων, αυτή η διάταξη δεν θα προσαρμοστεί εάν αλλάξει η προβολή. Τώρα που έχουμε τα βασικά στοιχεία, προσθέστε τα ερωτήματα των μέσων μαζικής ενημέρωσης.
Τα ερωτήματα των μέσων ενημέρωσης χρησιμοποιούνται συχνά σήμερα. Οι περισσότεροι σχεδιαστές ιστοσελίδων τους καταλαβαίνουν, αλλά σε περίπτωση που είναι η πρώτη σας φορά, εδώ είναι μια γρήγορη ενημέρωση: τα ερωτήματα μέσων ελέγχουν την ικανότητα της συσκευής που χρησιμοποιείτε (πλάτος, προσανατολισμός και ανάλυση) και εκτελούν συγκεκριμένο CSS εάν οι συνθήκες που καθορίζονται για τα μέσα ερωτήματος ικανοποιούνται. Στο παράδειγμά μας, θα χρησιμοποιήσουμε δύο ερωτήματα μέσων που θα ελέγξουν εάν το πρόγραμμα περιήγησης είναι μικρότερο από 960px και αν είναι μικρότερο από 660px. Στη συνέχεια θα ορίσουμε το πλάτος των στοιχείων ανάλογα, θα κρύψουμε επίσης το τελευταίο παιδικό div, ώστε οι άλλοι δύο να έχουν περισσότερο χώρο:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}Αυτό είναι όλο που χρειαζόμαστε για τα ερωτήματα των μέσων ενημέρωσης. Σημειώστε ότι είναι σημαντικό ο κώδικας αυτός να τοποθετείται κάτω από τον αρχικό κώδικα CSS παραπάνω, έτσι ώστε τα ερωτήματα μέσων να αντικαταστήσουν τον κώδικα πάνω από αυτά. Εάν δοκιμάσετε το αρχείο σας τώρα, θα δείτε το μέγεθος των αλλαγών divs και την αδιαφάνεια της τελευταίας αλλαγής παιδιού div όταν αλλάξετε το μέγεθος του παραθύρου του προγράμματος περιήγησης.
Θα παρατηρήσετε ότι για να αποκρύψετε το τελευταίο παιδί div, ρυθμίζουμε την αδιαφάνεια του σε 0 αντί να το ορίσουμε: καμία. Αυτό συμβαίνει επειδή θέλουμε να μπορούμε να ζωντανέψουμε την ιδιοκτησία. η αδιαφάνεια έχει πολλούς διαφορετικούς βαθμούς, ενώ η εμφάνιση είναι είτε αληθής είτε ψευδής (και επομένως δεν μπορεί να είναι κινούμενη).
Τα CSS κινούμενα σχέδια αποδείχτηκαν πολύ χρήσιμα κατά την εκτέλεση αυτών των μικρών κινούμενων εικόνων που χρησιμοποιήσαμε για να τρέχουμε στο jQuery, όπως η κινούμενη εικόνα χρώματος, πλάτους και αδιαφάνειας.
Επειδή θέλουμε τη σελίδα να ζωντανεύει στο σύνολό της, χρησιμοποιούμε τον επιλογέα * CSS και ρυθμίζουμε την κινούμενη εικόνα. Τα CSS κινούμενα σχέδια υποβαθμίζονται με χαρά, αλλά θα θέλετε να προσθέσετε και τα προθέματα προμηθευτών, ώστε να υπάρχει όσο το δυνατόν περισσότερη υποστήριξη:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Μπορείτε να δείτε το τελικό αποτέλεσμα εδώ.
Προσθέτοντας απλά κινούμενα σχέδια όπως αυτά, είναι μια ωραία τελική πινελιά σε οποιαδήποτε ιστοσελίδα. Μερικές γραμμές κώδικα προσθέτουν ένα πολύ ωραίο γυαλιστικό στην περιοχή που σας ανταποκρίνεται.
Έχετε ενημερωμένα ερωτήματα μέσων σε ένα έργο; Ποια αποτελέσματα επιτύχατε; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, μεγέθους εικόνας μέσω Shutterstock.