Πριν από μερικά χρόνια, ήταν σχετικά εύκολο να σχεδιάσετε και να δημιουργήσετε ιστότοπους. Οι ιστότοποι ήταν απλούστεροι και προβλήθηκαν σε επιτραπέζιους και φορητούς υπολογιστές με ελάχιστες διαφορές στα μεγέθη οθόνης. Σήμερα, με κινητές συσκευές που αναλαμβάνουν το χρόνο περιήγησης των επισκεπτών, ένας ιστότοπος μπορεί να προβληθεί σε μια οθόνη smartphone 4,8 ", ένα tablet" 5 phablet ", ένα" 7 "tablet ή οποιοδήποτε άλλο μέγεθος.
Έτσι, πώς εξασφαλίζετε ότι ο ιστότοπός σας εμφανίζεται σωστά σε όλους τους τύπους συσκευών και τα μεγέθη οθόνης;
Η λύση προτάθηκε για πρώτη φορά από την Ο Ethan Marcotte, όταν διερεύνησε τρόπους για να κάνει τα σχέδια του ιστοτόπου να αποκρίνονται, δηλαδή να τα αλλάζουν ανάλογα με το μέγεθος της οθόνης. Ένας ανταποκρινόμενος σχεδιασμός ιστοσελίδων είναι αυτός που κάνει έξυπνη χρήση του CSS για να διασφαλίσει ότι οι ιστοσελίδες θα αποδίδουν καλά σε ένα ευρύ φάσμα μεγεθών οθόνης - χωρίς να καταφεύγουν σε ανακατεύθυνση URL ή να εκτελούν δυναμικά διαφορετικούς κώδικες HTML και CSS, ανάλογα με το UserAgent. Δεν είναι πραγματικά μια τεχνολογία ή ένα πρότυπο, αλλά ένα σύνολο αρχών σχεδιασμού που συμβάλλουν στην επίτευξη του αποτελέσματος.
Τα τελευταία χρόνια, έχουν αναπτυχθεί πολλά πρότυπα απόκρισης, πλαίσια CSS και θέματα WordPress. Είναι, για παράδειγμα, πιθανό να δημιουργηθεί ένας ανταποκρινόμενος ιστότοπος στο WordPress χωρίς να γράψουμε μια μόνο γραμμή κώδικα.
Αλλά ένας πραγματικός σχεδιαστής ιστοσελίδων δεν είναι ικανοποιημένος με τη χρήση μόνο των προτύπων. Θα κάνει την προσπάθεια να κατανοήσει τα στοιχεία του ανταποκριτικού σχεδιασμού ιστοσελίδων, προκειμένου να τα χρησιμοποιήσει αποτελεσματικά.
Έτσι σήμερα, θα εξετάσουμε τις 3 θεμελιώδεις τεχνικές που χρειάζεστε για να κυριαρχήσετε, να είστε αποτελεσματικός σχεδιαστής απόκρισης.
Τα ερωτήματα των μέσων μαζικής ενημέρωσης σας επιτρέπουν να σχεδιάσετε διαφορετικές διατάξεις για διαφορετικούς τύπους μέσων όπως οθόνη, εκτύπωση, τηλεόραση, συσκευές χειρός κ.λπ. Ανάλογα με τον τύπο μέσου, μπορείτε να διαμορφώσετε το στυλ, τη γραμματοσειρά και άλλα στοιχεία της σελίδας.
Εισαγόμενα στο CSS3, τα ερωτήματα μέσων επιτρέπουν σε έναν σχεδιαστή να προσαρμόζει την παρουσίαση του περιεχομένου ώστε να ταιριάζει σε μια συγκεκριμένη σειρά τύπων συσκευών εξόδου. Αποτελούνται από μια δήλωση τύπου μέσου και από μία ή περισσότερες εκφράσεις χαρακτηριστικών μέσων που αξιολογούνται ως αληθή ή ψευδή.
Η γκάμα τύπων μέσων περιλαμβάνει χειρός, οθόνη, τηλεόραση, εκτύπωση και προβολή. Οι δυνατότητες μέσων περιλαμβάνουν, αλλά δεν περιορίζονται στο ύψος, το πλάτος, την αναλογία διαστάσεων, την ανάλυση, τον χρωματικό δείκτη καθώς και το ύψος, το πλάτος του παραθύρου του προγράμματος περιήγησης.
Ας πάρουμε ένα βασικό παράδειγμα. φανταστείτε ότι θέλετε το μέγεθος του κειμένου σας να συρρικνώνεται σε μικρότερες συσκευές, όπως τα τηλέφωνα. Το ερώτημα για αυτό θα έμοιαζε όπως:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Τώρα, το μέγεθος γραμματοσειράς των παραγράφων σας θα οριστεί σε 1em, εκτός αν το πλάτος του προγράμματος περιήγησης είναι μικρότερο από 400px, οπότε θα συρρικνωθεί στο 0,8εμ.
Από την εμπειρία μου, ο καλύτερος τρόπος για να σχεδιάσετε μια προσαρμοσμένη διάταξη είναι να δημιουργήσετε πρώτα ένα προεπιλεγμένο φύλλο στυλ με τα κύρια δομικά στοιχεία. Στη συνέχεια, μπορείτε να προσθέσετε ερωτήματα μέσων για να προσαρμόσετε στοιχεία βάσει της διάταξης ή άλλων στοιχείων της συσκευής. Αν είναι κάτι παραπάνω από μια χούφτα κανόνων, ίσως είναι καλύτερο να τα μετακινήσετε σε ένα ξεχωριστό φύλλο παιδιού - το οποίο μπορείτε να φορτώσετε επιλεκτικά αργότερα. Δείτε πώς θα λειτουργήσει αυτό:
Αυτό το κομμάτι κώδικα ελέγχει αν η συσκευή είναι χειρός σε κατάσταση οριζόντιου προσανατολισμού με πλάτος συσκευής μικρότερο από 720ppx και αν ναι, φορτώνει το φύλλο στυλ tablet_layout.css .
Σημειώστε ότι τα χαρακτηριστικά πλάτος, ύψος, min / max-width, min / max-height αναφέρονται στο πλάτος και το ύψος του παραθύρου του προγράμματος περιήγησης. Το πλάτος και το ύψος της συσκευής ελέγχονται από το πλάτος της συσκευής, το ύψος της συσκευής, το ελάχιστο / μέγιστο πλάτος της συσκευής, το ελάχιστο / μέγιστο ύψος της συσκευής . Αν θέλετε να κοιτάξετε ψηλά περισσότερα παραδείγματα χρησιμοποιώντας ερωτήματα μέσων Το MDN έχει καλή στρογγυλοποίηση.
Το "πλέγμα υγρών" είναι ένας όρος που χρησιμοποιείται για να περιγράψει μια διάταξη που κωδικοποιείται σε σχετικές αναλογίες των διαφόρων στοιχείων, παρά με σταθερές τιμές εικονοστοιχείων.
Οι παραδοσιακές διατάξεις CSS χρησιμοποιούσαν πλέγματα σταθερού πλάτους για να τοποθετήσουν τα στοιχεία. Η προσέγγιση σταθερού πλάτους δεν λειτουργεί πλέον πλέον τώρα που έχουμε οθόνες συσκευών που κυμαίνονται από 3 ίντσες έως μερικά πόδια. Σε ένα σχέδιο πλέγματος υγρών, τα πάντα κωδικοποιούνται ως προς τη σχετική αναλογία τους με το στοιχείο βάσης, δηλαδή αντί να καθορίζουν το ύψος και το πλάτος κάθε στοιχείου. δίνεται ένα ποσοστό ή σχετικό μέγεθος.
Φανταστείτε ότι έχετε τέσσερις στήλες. Για να φτιάξετε αυτό το υγρό, αντί να ορίσετε το κάθε ένα ως πλάτος 200 pixel, θα πρέπει να το ορίσετε 0.2083% (δηλαδή ως 200/960). Τουλάχιστον, αυτή είναι η αρχή. Η δημιουργία ενός εντελώς υγρού πλέγματος απαιτεί πολύ προσοχή. Είναι μία από αυτές τις σπάνιες περιπτώσεις που προτιμώ να χρησιμοποιώ προσαρμοσμένα εργαλεία. Μικροσκοπικό πλέγμα υγρών , Σύστημα Μεταβλητού Πλέγματος και Πλέγμα αναφοράς γραμμής υγρών είναι μερικές μεγάλες εναλλακτικές λύσεις για να γράψετε το δικό σας πλέγμα υγρών από το μηδέν.
Οι εικόνες θεωρούνται ευέλικτες όταν η εικόνα εμφανίζεται σε εγγενές μέγεθος, όσο το υποστηρίζει το κοντέινερ HTML, αλλά όταν το παράθυρο του προγράμματος περιήγησης συρρικνώνεται, η εικόνα κλιμακώνεται για να την χωρέσει.
Ακόμα κι αν το υπόλοιπο του σχεδίου είναι ρευστό και ευαίσθητο, δεν πρόκειται να αποδώσει καλά, αν όλα τα εξαρτήματα δεν κλιμακώνονται. Αυτό μπορεί να γίνει δύσκολο με εικόνες και βίντεο. Μια εικόνα πλάτους 700 εικονοστοιχείων θα φαίνεται εξαιρετική σε μια επιφάνεια εργασίας, αλλά αποσυνδεθεί όταν προβληθεί σε δισκίο 320 pixel. Τα περισσότερα μοντέρνα σχέδια που ανταποκρίνονται στις ανάγκες χρησιμοποιούν την ιδιότητα μέγιστου πλάτους CSS για να κάνουν κλίμακες εικόνων. (Αυτή η μέθοδος ήταν που προτάθηκε αρχικά από τον Richard Butler .)
img {max-width: 100%;}Αυτές οι λίγες γραμμές θα εξασφαλίσουν ότι η εικόνα δεν θα αφαιρεθεί, ρυθμίζοντας το μέγιστο πλάτος εικόνας στο 100% του δοχείου. Αν το παράθυρο ή η οθόνη του προγράμματος περιήγησης γίνει μικρότερο, αυτό το κομμάτι του κώδικα CSS θα συρρικνώνει την εικόνα αναλογικά. Το ύψος ρυθμίζεται αυτόματα, διατηρώντας ταυτόχρονα την αναλογία διαστάσεων.
Μπορείτε, αντίθετα, να κλειδώσετε την εικόνα ώστε να καταλαμβάνει μια συγκεκριμένη αναλογία κάθετης οθόνης όπως αυτή
img {max-height: 75%;}(Βεβαιωθείτε ότι δεν χρησιμοποιείτε ταυτόχρονα τις ιδιότητες μέγιστου ύψους και μέγιστου πλάτους .)
Το μέγεθος της εικόνας μπορεί επίσης να συνδεθεί με το μέγεθος κειμένου αντί για το γονικό στοιχείο χρησιμοποιώντας em , όπως παρακάτω:
img {width: 30em;}Αν η εικόνα περιέχει κείμενο, ίσως θέλετε να περιορίσετε το ελάχιστο / μέγιστο μέγεθος, για να βεβαιωθείτε ότι το κείμενο είναι αναγνώσιμο. Μπορείτε να το ορίσετε ως εξής:
img {width: 30em;max-width: 500px;min-width: 100px;}Οι ίδιες τεχνικές μπορούν να χρησιμοποιηθούν για την κλιμάκωση βίντεο, για παράδειγμα:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Ανταποκρινόμενος σχεδιασμός είναι το μέλλον της βιομηχανίας μας, αλλά με τόσες διαφορετικές τεχνικές που πετούν γύρω, είναι συχνά δύσκολο να συμβαδίσει. Μάθετε αυτές τις 3 απλές τεχνικές, και θα είστε το 90% του τρόπου να είστε ένας ανταποκρινόμενος σχεδιαστής.
Προτεινόμενη εικόνα / μικρογραφία, ελαστική εικόνα μέσω Shutterstock.