Περιεχόμενο
- Αποκριτικές εικόνες
- Εκτέλεση
- Υπό όρους και τεμπέλης φόρτωση
- Αποκριτική τυπογραφία
- Ερωτήματα πολυμέσων σε JavaScript
- Προοδευτική βελτίωση
- Σχέδιο
- Διάταξη πλέγματος CSS
- Τελικά
Ο ανταποκρινόμενος σχεδιασμός ιστοσελίδων ακούγεται απίστευτα απλός. Επιλέξτε ευέλικτα πλέγματα για τη διάταξη, χρησιμοποιήστε ευέλικτα μέσα (εικόνες, βίντεο, iframes) και εφαρμόστε ερωτήματα πολυμέσων για να ενημερώσετε αυτές τις μετρήσεις ώστε να τακτοποιήσετε καλύτερα το περιεχόμενο σε οποιαδήποτε θύρα προβολής. Στην πράξη μάθαμε ότι δεν είναι πραγματικά τόσο εύκολο. Τα μικροσκοπικά ζητήματα που εμφανίζονται κατά τη διάρκεια κάθε έργου μας κρατούν ξύνοντας τα κεφάλια μας, και περιστασιακά ακόμη και χαράζοντας χαρακώματα νυχιών στα γραφεία μας.
Από τότε που άρχισα να επιμελώ το ενημερωτικό δελτίο Responsive Design Weekly, ήμουν αρκετά τυχερός που μίλησα με πολλά μέλη της κοινότητας ιστού και άκουσα τις εμπειρίες τους. Ήθελα να μάθω τι ακριβώς ήθελε να μάθει η κοινότητα, γι 'αυτό έδωσα μια έρευνα στους αναγνώστες. Εδώ είναι τα κορυφαία αποτελέσματα:
- Αποκριτικές εικόνες
- Βελτίωση της απόδοσης
- Αποκριτική τυπογραφία
- Ερωτήματα πολυμέσων σε JavaScript
- Προοδευτική βελτίωση
- Σχέδιο
Έχοντας υπόψη αυτά τα θέματα, έτρεξα μια σειρά podcast ζητώντας από κάποιους από τους ηγέτες της βιομηχανίας μας τις σκέψεις τους. Στις απαντήσεις τους, ένα σημείο ήταν ομόφωνη: επικεντρωθείτε στο να αποκτήσετε τα βασικά ακριβώς πριν αρχίσετε να ανησυχείτε για συναρπαστικές και προηγμένες τεχνικές. Με την επιστροφή των πραγμάτων στα βασικά, είμαστε σε θέση να οικοδομήσουμε μια ισχυρή διεπαφή για όλους, τοποθετώντας τις λειτουργίες όταν το επιτρέπει η συσκευή ή το περιβάλλον του χρήστη.
«Λοιπόν ... τι γίνεται με αυτές τις προηγμένες τεχνικές;» Σας ακούω να ρωτάτε. Νομίζω ότι ο Stephen Hay το συνόψισε καλύτερα όταν είπε: «Η απόλυτη τεχνική RWD είναι να ξεκινήσετε χωρίς να χρησιμοποιήσετε προηγμένες τεχνικές RWD. Ξεκινήστε με δομημένο περιεχόμενο και προχωρήστε. Προσθέστε ένα σημείο διακοπής μόνο όταν το σχέδιο σπάσει και το περιεχόμενο το υπαγορεύει και ... αυτό είναι. "
Σε αυτό το άρθρο, θα ξεκινήσω με τα βασικά και θα προσθέσω επίπεδα πολυπλοκότητας, όπως το επιτρέπει η κατάσταση, για να αξιοποιήσουμε αυτές τις προηγμένες τεχνικές. Ας αρχίσουμε.
Αποκριτικές εικόνες
Τα ρευστά μέσα ήταν ένα βασικό μέρος του RWD όταν ορίστηκε για πρώτη φορά από τον Ethan Marcotte. πλάτος: 100%; , μέγιστο πλάτος: 100%; εξακολουθεί να λειτουργεί σήμερα, αλλά το τοπίο απόκρισης εικόνας έχει γίνει πολύ πιο περίπλοκο. Με αυξανόμενους αριθμούς μεγεθών οθόνης, πυκνότητας εικονοστοιχείων και συσκευών που υποστηρίζουν, επιζητούμε μεγαλύτερο έλεγχο.
Οι τρεις κύριες ανησυχίες καθορίστηκαν από την ομάδα κοινότητας Responsive Images (RICG):
- Το μέγεθος kilobyte της εικόνας που στέλνουμε μέσω του καλωδίου
- Το φυσικό μέγεθος της εικόνας που στέλνουμε σε συσκευές υψηλής DPI
- Η περικοπή της εικόνας με τη μορφή κατεύθυνσης τέχνης για το συγκεκριμένο μέγεθος της θύρας προβολής
Ο Yoav Weiss, με τη βοήθεια του Indiegogo, έχει κάνει το μεγαλύτερο μέρος της εργασίας για την εφαρμογή Blink - το πιρούνι του WebKit της Google και τη στιγμή που το διαβάζετε, θα αποσταλεί στο Chrome και στον Firefox. Το Safari 8 θα αποστείλει το srcset, ωστόσο το χαρακτηριστικό size είναι μόνο σε νυχτερινές κατασκευές και η εικόνα> δεν έχει ακόμη εφαρμοστεί.
Με την άφιξη οποιουδήποτε νέου στη διαδικασία ανάπτυξης του διαδικτύου μας, μπορεί να είναι δύσκολο να ξεκινήσετε. Ας δούμε ένα βήμα προς βήμα ένα παράδειγμα.
img! - Δηλώστε την εφεδρική εικόνα για όλα τα προγράμματα περιήγησης που δεν υποστηρίζουν εικόνα -> src = "horse-350.webp"! - Δηλώστε όλα τα μεγέθη της εικόνας στο srcset. Συμπεριλάβετε το πλάτος της εικόνας χρησιμοποιώντας τον περιγραφέα w για να ενημερώσετε το πρόγραμμα περιήγησης για το πλάτος κάθε εικόνας. -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Τα μεγέθη ενημερώνουν το πρόγραμμα περιήγησης για τη διάταξη του ιστότοπού μας. Εδώ λέμε για οποιαδήποτε θύρα προβολής που είναι 64ems και μεγαλύτερη, χρησιμοποιήστε μια εικόνα που θα καταλαμβάνει το 70% της θύρας προβολής -> size = "(ελάχιστο πλάτος: 64em) 70vw,! - Εάν η θύρα προβολής δεν είναι αυτή μεγάλο, τότε για οποιαδήποτε θύρα προβολής που είναι 37,5εκ και μεγαλύτερη, χρησιμοποιήστε μια εικόνα που καταλαμβάνει το 95% της θύρας προβολής -> (πλάτος ελάχιστου: 37,5em) 95vw,! - και εάν η θύρα προβολής είναι μικρότερη από αυτήν, χρησιμοποιήστε μια εικόνα που καταλαμβάνει το 100% της θύρας προβολής -> 100vw "! - έχετε πάντα κείμενο alt. -> alt =" Ένα άλογο "/>
Από την άποψη της απόδοσης, δεν έχει σημασία αν χρησιμοποιείτε το ελάχιστο πλάτος ή το μέγιστο πλάτος στο χαρακτηριστικό μεγέθη - αλλά η παραγγελία προέλευσης έχει σημασία. Το πρόγραμμα περιήγησης θα χρησιμοποιεί πάντα το πρώτο μέγεθος που ταιριάζει.
Επίσης, θυμηθείτε ότι κωδικοποιούμε το χαρακτηριστικό των μεγεθών για να ορίσουμε άμεσα σε σχέση με το σχέδιό μας. Αυτό μπορεί να προκαλέσει προβλήματα προς τα εμπρός. Για παράδειγμα, εάν επανασχεδιάσετε τον ιστότοπό σας, θα πρέπει να επανεξετάσετε όλα τα img> ή picture> s και να επαναπροσδιορίσετε τα μεγέθη. Εάν χρησιμοποιείτε CMS, αυτό μπορεί να ξεπεραστεί ως μέρος της διαδικασίας κατασκευής σας.
Το WordPress διαθέτει ήδη ένα πρόσθετο για βοήθεια. Ορίζει το srcset σε τυπικές ποικιλίες εικόνων WP και σας επιτρέπει να δηλώσετε μεγέθη σε μια κεντρική τοποθεσία. Όταν η σελίδα δημιουργείται από τη βάση δεδομένων, αλλάζει οποιεσδήποτε αναφορές στο img> και τις αντικαθιστά με τη σήμανση εικόνας.
Βασικός
- Σκεφτείτε εάν πρέπει πραγματικά να συμπεριλάβετε μια εικόνα. Είναι το περιεχόμενο πυρήνα της εικόνας ή είναι διακοσμητικό; Μία λιγότερη εικόνα θα σημαίνει ταχύτερο χρόνο φόρτωσης
- Βελτιστοποιήστε τις εικόνες που πρέπει να συμπεριλάβετε χρησιμοποιώντας το ImageOptim
- Ορίστε κεφαλίδες λήξης για τις εικόνες σας στο διακομιστή σας ή στο αρχείο .htaccess (δείτε λεπτομέρειες στην ενότητα "Απόδοση")
- Το PictureFill παρέχει υποστήριξη polyfill για εικόνες
Προχωρημένος
- Lazy φορτώστε τις εικόνες σας χρησιμοποιώντας το Lazy Load plugin του jQuery
- Χρησιμοποιήστε HTMLImageElement.Sizes και HTMLPictureElement για ανίχνευση χαρακτηριστικών.
- Το προηγμένο πρόσθετο PictureFill WP, που βρίσκεται στο Github, θα σας επιτρέψει να ορίσετε προσαρμοσμένες τιμές πλάτους και μεγέθους εικόνας
Εκτέλεση
Για να έχουμε την ταχύτερη αντιληπτή απόδοση στις σελίδες μας, χρειαζόμαστε όλο το HTML και το CSS που απαιτείται για να καταστήσουμε το πάνω μέρος της σελίδας μας στην πρώτη απάντηση από τον διακομιστή. Αυτός ο μαγικός αριθμός είναι 14kb και βασίζεται στο μέγιστο μέγεθος παραθύρου συμφόρησης εντός του πρώτου χρόνου μετ 'επιστροφής (RTT).
Ο Patrick Hamann, τεχνικός προπορευόμενος στο Guardian, και η ομάδα του κατάφεραν να σπάσουν το φράγμα των 1000ms χρησιμοποιώντας ένα συνδυασμό τεχνικών frontend και backend. Η προσέγγιση του Guardian είναι να διασφαλίσει ότι το απαιτούμενο περιεχόμενο - το άρθρο - παραδίδεται στον χρήστη το συντομότερο δυνατό και εντός του μαγικού αριθμού των 14kb.
Ας δούμε τη διαδικασία:
- Ο χρήστης κάνει κλικ σε έναν σύνδεσμο Google για μια είδηση
- Ένα μόνο αίτημα αποκλεισμού αποστέλλεται στη βάση δεδομένων για το άρθρο. Δεν ζητούνται σχετικές ιστορίες ή σχόλια
- Το HTML φορτώνεται με Critical CSS
- στο κεφάλι>
- Πραγματοποιείται διαδικασία "Κόψτε τη μουστάρδα" και φορτώνονται τυχόν στοιχεία υπό όρους που βασίζονται στις δυνατότητες της συσκευής του χρήστη
- Κάθε περιεχόμενο που σχετίζεται ή υποστηρίζει το ίδιο το άρθρο (εικόνες σχετικών άρθρων, σχόλια άρθρου και ούτω καθεξής) φορτώνεται στη θέση του
Η βελτιστοποίηση της κρίσιμης διαδρομής απόδοσης σημαίνει ότι η κεφαλή> έχει μήκος 222 γραμμών. Ωστόσο, το κρίσιμο περιεχόμενο που ο χρήστης ήρθε για να δει εξακολουθεί να βρίσκεται εντός του αρχικού ωφέλιμου φορτίου των 14kb όταν το gzip. Είναι αυτή η διαδικασία που βοηθά να σπάσει αυτό το φράγμα απόδοσης 1000ms.
Υπό όρους και τεμπέλης φόρτωση
Η φόρτωση υπό όρους βελτιώνει την εμπειρία του χρήστη με βάση τη λειτουργία της συσκευής του. Εργαλεία όπως το Modernizr σάς επιτρέπουν να δοκιμάσετε αυτές τις λειτουργίες, αλλά να γνωρίζετε ότι επειδή ένα πρόγραμμα περιήγησης λέει ότι προσφέρει υποστήριξη, αυτό δεν σημαίνει πάντα πλήρη υποστήριξη.
Μία τεχνική είναι να σταματήσει η φόρτωση κάτι έως ότου ο χρήστης δείξει την πρόθεση να χρησιμοποιήσει αυτήν τη δυνατότητα. Αυτό θα θεωρηθεί υπό όρους. Μπορείτε να καθυστερήσετε τη φόρτωση στα εικονίδια κοινωνικής δικτύωσης έως ότου ο χρήστης αιωρηθεί ή αγγίξει τα εικονίδια ή θα μπορούσατε να αποφύγετε τη φόρτωση ενός χάρτη Google iframe σε μικρότερα σημεία προβολής όπου ο χρήστης είναι πιθανό να προτιμά να συνδέεται με μια αποκλειστική εφαρμογή χαρτογράφησης. Μια άλλη προσέγγιση είναι να «κόψετε τη μουστάρδα» - δείτε το boxout παραπάνω για λεπτομέρειες σχετικά με αυτό.
Η αργή φόρτωση ορίζεται ως κάτι που σκοπεύετε πάντα να φορτώνετε στη σελίδα - εικόνες που αποτελούν μέρος του άρθρου, σχόλια ή άλλα σχετικά άρθρα - αλλά δεν χρειάζεται να είναι εκεί για να αρχίσει να καταναλώνει το περιεχόμενο ο χρήστης.
Βασικός
- Ενεργοποιήστε το gzipping για αρχεία και ορίστε κεφαλίδες λήξης για όλο το στατικό περιεχόμενο (netm.ag/expire-260)
- Χρησιμοποιήστε το πρόσθετο Lazy Load jQuery. Αυτό φορτώνει εικόνες όταν πλησιάζετε στη θύρα προβολής ή μετά από μια ορισμένη χρονική περίοδο
Προχωρημένος
- Ρύθμιση γρήγορα ή CloudFlare. Τα δίκτυα παράδοσης περιεχομένου (CDN) παραδίδουν το στατικό σας περιεχόμενο στους χρήστες γρηγορότερα από τον δικό σας διακομιστή και έχουν κάποιες δωρεάν σειρές
- Ενεργοποιήστε το SPDY για προγράμματα περιήγησης με δυνατότητα http2 για να επωφεληθείτε από δυνατότητες http2 όπως παράλληλα αιτήματα http
- Το Social Count επιτρέπει την υπό όρους φόρτωση των κοινωνικών εικονιδίων σας
- Η χρήση του API στατικών χαρτών θα σας επιτρέψει να αλλάξετε διαδραστικούς χάρτες Google για εικόνες. Ρίξτε μια ματιά στο παράδειγμα του Brad Frost στο netm.ag/static-260
- Το μοτίβο συμπερίληψης Ajax θα φορτώσει αποσπάσματα περιεχομένου είτε από ένα χαρακτηριστικό data-before, data-after ή data-Replicate
Αποκριτική τυπογραφία
Η τυπογραφία έχει ως στόχο να διευκολύνει την πέψη του περιεχομένου σας. Η αποκριτική τυπογραφία επεκτείνει αυτό για να εξασφαλίσει την αναγνωσιμότητα σε μια μεγάλη ποικιλία συσκευών και προβολών. Ο Τζόρνταν Μουρ παραδέχεται ότι αυτός ο τύπος είναι ένα πράγμα που δεν είναι πρόθυμος να βρει. Εάν θέλετε, ρίξτε μια ή δύο εικόνες, αλλά βεβαιωθείτε ότι έχετε εξαιρετικό τύπο.
Ο Stephen Hay προτείνει να ρυθμίσετε το μέγεθος της γραμματοσειράς HTML στο 100 τοις εκατό (διαβάστε: αφήστε το ως έχει), επειδή κάθε κατασκευαστής προγράμματος περιήγησης ή συσκευής κάνει μια λογικά αναγνώσιμη προεπιλογή για μια συγκεκριμένη ανάλυση ή συσκευή. Για τα περισσότερα προγράμματα περιήγησης επιτραπέζιου υπολογιστή είναι 16px.
Από την άλλη πλευρά, ο Moore χρησιμοποιεί τη μονάδα REM και το μέγεθος γραμματοσειράς HTML για να ορίσει ένα ελάχιστο μέγεθος γραμματοσειράς για ορισμένα στοιχεία περιεχομένου. Για παράδειγμα, αν θέλετε το byline ενός άρθρου να είναι πάντα 14px, ορίστε το ως το βασικό μέγεθος γραμματοσειράς στο στοιχείο HTML και ορίστε το .byline {font-size: 1rem;}. Καθώς κλιμακώνετε το σώμα: μέγεθος-γραμματοσειράς: για να ταιριάζει στη θύρα προβολής, δεν θα επηρεαστεί το στυλ .by-line.
Ένα καλό μήκος γραμμής ανάγνωσης είναι επίσης σημαντικό - στόχος για 45 έως 65 χαρακτήρες. Υπάρχει ένας σελιδοδείκτης που μπορείτε να χρησιμοποιήσετε για να ελέγξετε το περιεχόμενό σας. Εάν υποστηρίζετε πολλές γλώσσες με το σχέδιό σας, τότε το μήκος της γραμμής μπορεί να διαφέρει επίσης. Ο Moore προτείνει τη χρήση του: lang (de) άρθρου {max-width: 30em} για την κάλυψη τυχόν προβλημάτων εκεί.
Για να διατηρήσετε τον κατακόρυφο ρυθμό, ρυθμίστε το περιθώριο κάτω από τα μπλοκ περιεχομένου, ul>, ol>, blockquote>, table>, blockquote> και ούτω καθεξής, στο ίδιο με το ύψος της γραμμής σας. Εάν ο ρυθμός διακόπτεται με την εισαγωγή εικόνων, μπορείτε να το διορθώσετε προσθέτοντας Baseline.js ή BaselineAlign.js.
Βασικός
- Βάλετε τη γραμματοσειρά σας σε σώμα 100 τοις εκατό
- Εργαστείτε σε σχετικές μονάδες em
- Ρυθμίστε τα περιθώριά σας στο ύψος της γραμμής σας για να διατηρήσετε τον κάθετο ρυθμό στο σχέδιό σας
Προχωρημένος
- Βελτιώστε την απόδοση φόρτωσης γραμματοσειρών με Enhance.js ή αναβαλλόμενη φόρτωση γραμματοσειράς
- Χρησιμοποιήστε το Sass @ inclusive για σημασιολογικές επικεφαλίδες.
- Συχνά πρέπει να χρησιμοποιήσουμε το στυλ h5 σε ένα widget πλευρικής γραμμής που απαιτεί σήμανση h2. Χρησιμοποιήστε τους τυπογραφικούς συνδυασμούς Bearded για να ελέγξετε το μέγεθος και να παραμείνετε σημασιολογικοί με τον παρακάτω κώδικα:
Ερωτήματα πολυμέσων σε JavaScript
Από τότε που καταφέραμε να ελέγξουμε τη διάταξη σε μια ποικιλία προβολών μέσω ερωτημάτων πολυμέσων, ψάχναμε έναν τρόπο να το συνδέσουμε και με τη λειτουργία του JavaScript μας. Υπάρχουν μερικοί τρόποι για να ενεργοποιήσετε τη JavaScript σε συγκεκριμένα πλάτη, ύψη και προσανατολισμούς θύρας προβολής και ορισμένοι έξυπνοι άνθρωποι έχουν γράψει μερικές εύχρηστες εγγενείς προσθήκες JS όπως το Enquire.js και το Simple State Manager. Θα μπορούσατε ακόμη και να το φτιάξετε μόνοι σας χρησιμοποιώντας το matchMedia. Ωστόσο, έχετε το πρόβλημα που πρέπει να αντιγράψετε τα ερωτήματα πολυμέσων σας στο CSS και το JavaScript.
Ο Aaron Gustafson έχει ένα τακτοποιημένο κόλπο που σημαίνει ότι δεν χρειάζεται να διαχειριστείτε και να αντιστοιχίσετε τα ερωτήματα πολυμέσων σας στο CSS και στο JS σας. Η ιδέα προήλθε αρχικά από τον Jeremy Keith και σε αυτό το παράδειγμα ο Gustafson την έφερε σε πλήρη εφαρμογή.
Χρησιμοποιώντας το getActiveMQ (netm.ag/media-260), εισάγετε div # getActiveMQ-watcher στο τέλος του στοιχείου σώματος και κρύψτε το. Στη συνέχεια, μέσα στο CSS ορίστε # getActiveMQ-watcher {font-family: break-0;} στο πρώτο ερώτημα πολυμέσων, font-family: break-1; στη δεύτερη, γραμματοσειρά-οικογένεια: break-2; στο τρίτο και ούτω καθεξής.
Το σενάριο χρησιμοποιεί το WatchResize () (netm.ag/resize-260) για να ελέγξει αν το μέγεθος της θύρας προβολής έχει αλλάξει και στη συνέχεια διαβάζει την ενεργή οικογένεια γραμματοσειρών. Τώρα μπορείτε να το χρησιμοποιήσετε για να συνδέσετε τις βελτιώσεις JS, όπως να προσθέσετε μια διασύνδεση με καρτέλες σε dl> όταν το επιτρέπει η θύρα προβολής, να αλλάξετε τη συμπεριφορά ενός lightbox ή να ενημερώσετε τη διάταξη ενός πίνακα δεδομένων. Δείτε το getActiveMQ Codepen στο netm.ag/active-260.
Βασικός
- Ξεχάστε τη JavaScript για διαφορετικά σημεία προβολής. Παρέχετε περιεχόμενο και λειτουργίες ιστότοπου στους χρήστες με τρόπο που να έχουν πρόσβαση σε όλα τα σημεία προβολής. Δεν πρέπει ποτέ να χρειαζόμαστε JavaScript
Προχωρημένος
- Επεκτείνετε τη μέθοδο του Gustafson χρησιμοποιώντας το Breakup ως μια προκαθορισμένη λίστα ερωτημάτων πολυμέσων και αυτοματοποιώντας τη δημιουργία της λίστας των οικογενειών γραμματοσειρών για το getActiveMQ-watcher
Προοδευτική βελτίωση
Μια κοινή λανθασμένη αντίληψη για την προοδευτική βελτίωση είναι ότι οι άνθρωποι σκέφτονται, "Ω, δεν μπορώ να χρησιμοποιήσω αυτήν τη νέα δυνατότητα", αλλά στην πραγματικότητα, είναι το αντίθετο Η προοδευτική βελτίωση σημαίνει ότι μπορείτε να παραδώσετε μια λειτουργία εάν υποστηρίζεται μόνο σε ένα ή ακόμη και σε κανένα πρόγραμμα περιήγησης και με την πάροδο του χρόνου οι άνθρωποι θα έχουν καλύτερη εμπειρία καθώς θα φτάνουν νέες εκδόσεις.
Εάν κοιτάξετε τη βασική λειτουργία οποιουδήποτε ιστότοπου, μπορείτε να το παραδώσετε ως HTML και να ζητήσετε από την πλευρά του διακομιστή να κάνει όλη την επεξεργασία. Πληρωμές, φόρμες, Μου αρέσει, κοινή χρήση, email, πίνακες ελέγχου - όλα μπορούν να γίνουν. Μόλις δημιουργηθεί το βασικό καθήκον, μπορούμε στη συνέχεια να στρώσουμε τις εκπληκτικές τεχνολογίες πάνω από αυτό, επειδή έχουμε ένα δίχτυ ασφαλείας για να πιάσουμε αυτές που πέφτουν. Οι περισσότερες από τις προηγμένες προσεγγίσεις που έχουμε συζητήσει εδώ βασίζονται σε προοδευτική βελτίωση.
Σχέδιο
Η ευέλικτη διάταξη είναι απλή, αλλά έχει πολλές διαφορετικές προσεγγίσεις. Δημιουργήστε απλές διατάξεις πλέγματος με λιγότερη σήμανση χρησιμοποιώντας τον επιλογέα nth-child ().
/ * δηλώστε το πρώτο πλάτος του κινητού για το πλέγμα * / .grid-1-4 {float: left; πλάτος: 100%; } / * Όταν η θύρα προβολής είναι τουλάχιστον 37,5em τότε ρυθμίστε το πλέγμα σε 50% ανά στοιχείο * / @media (ελάχιστο πλάτος: 37,5em) {.grid-1-4 {πλάτος: 50%; } / * Καθαρίστε το float κάθε δευτερόλεπτο στοιχείο ΜΕΤΑ το πρώτο. Αυτό στοχεύει την 3η, 5η, 7η, 9η ... στο πλέγμα. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (ελάχιστο πλάτος: 64em) {.grid-1-4 {πλάτος: 25%; } / * Καταργήστε την προηγούμενη διαγραφή * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Εκκαθαρίστε το float κάθε 4ο στοιχείο ΜΕΤΑ το πρώτο. Αυτό στοχεύει την 5η, 9η ... στο πλέγμα. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Αποχαιρετήστε τη χρήση θέσης και επιπλέουν για τις διατάξεις σας. Ενώ μας έχουν εξυπηρετήσει μέχρι σήμερα, η χρήση τους για διάταξη ήταν ένα απαραίτητο hack. Έχουμε τώρα δύο νέα παιδιά στο μπλοκ που θα βοηθήσουν στην επίλυση όλων των προβλημάτων της διάταξής μας - Flexbox και Grids.
Το Flexbox είναι ιδανικό για μεμονωμένες ενότητες, ελέγχοντας τη διάταξη των κομματιών περιεχομένου σε κάθε μία από τις ενότητες. Υπάρχουν διατάξεις που προσπαθούμε να παραδώσουμε που μπορούν να επιτευχθούν πιο εύκολα χρησιμοποιώντας το Flexbox, και αυτό ισχύει ακόμη περισσότερο με ιστότοπους που ανταποκρίνονται. Για περισσότερα σχετικά με αυτό, ανατρέξτε στον οδηγό CSS Tricks για το Flexbox ή το Flexbox Polyfill.
Διάταξη πλέγματος CSS
Το πλέγμα είναι περισσότερο για τη διάταξη επιπέδου μακροεντολών. Η ενότητα διάταξης πλέγματος σάς προσφέρει έναν εξαιρετικό τρόπο για να περιγράψετε τη διάταξή σας στο CSS σας. Ενώ βρίσκεται ακόμη στο προσχέδιο στάδιο, προτείνω αυτό το άρθρο σχετικά με τη διάταξη πλέγματος CSS της Rachel Andrew.
Τελικά
Αυτές είναι μερικές συμβουλές για να επεκτείνετε την πρακτική σας που ανταποκρίνεται. Όταν πλησιάζετε σε οποιαδήποτε νέα εργασία που ανταποκρίνεται, κάντε ένα βήμα πίσω και βεβαιωθείτε ότι έχετε τα σωστά βασικά. Ξεκινήστε με το περιεχόμενό σας, το HTML και τις βελτιωμένες εμπειρίες σε αυτά και δεν θα υπάρχει όριο στο πού μπορείτε να πάρετε τα σχέδιά σας.
Αυτό το άρθρο δημοσιεύτηκε αρχικά στο τεύχος 260 του καθαρό περιοδικό.
