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

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

Υπάρχει μια άποψη ότι παρόμοια εργαλεία δικτύωσηςισχύει μόνο κατά τη δημιουργία ιστότοπου. Ωστόσο, αν ξεκινήσετε από προσωπική εμπειρία, μπορείτε να διαφωνήσετε με αυτό. Αυτήν τη στιγμή χρησιμοποιώ πλέγματα στο 99% των έργων μου, συμπεριλαμβανομένων των ιστοτόπων που δεν αποκρίνονται. Εξάλλου. Κάνω πολλές άλλες εργασίες με βάση πλέγματα, για παράδειγμα, banner ή παρόμοια doodle.

Πως δουλεύει; Πολύ απλό. Ο σχεδιαστής καθορίζει τις παραμέτρους για τη δημιουργία ενός πλέγματος που είναι προεγκεκριμένο από ολόκληρη την ομάδα ανάπτυξης. Στη συνέχεια, κατεβάζει μια εικόνα με σχεδιασμένες στήλες στη μορφή PNG ή PSD, και δημιουργεί τη σχεδίαση του ιστότοπου με βάση τις γραμμές που προκύπτουν. Ο σχεδιαστής διάταξης, έχοντας ένα προετοιμασμένο πλαίσιο, αρχίζει ήδη να στοιχειοθετεί. Όλα αυτά επιταχύνουν σημαντικά την εργασία στον ιστότοπο τόσο για τον σχεδιαστή όσο και για τον σχεδιαστή διάταξης.

Αν μιλάμε για διάταξη χρησιμοποιώντας ένα αρθρωτό πλέγμα, τότε πολλά έχουν ήδη δημιουργηθεί για αυτό css. Το πιο συνηθισμένο είναι το Bootstrap. Εάν το έργο δεν είναι ενεργοποιημένο, τότε ορισμένα από τα προτεινόμενα εργαλεία είναι σε θέση να δημιουργήσουν, μαζί με την εικόνα πλέγματος, ολόκληρο το δικό τους πλαίσιο με προσαρμοσμένες παραμέτρους ενσωματωμένες σε αυτό, οι οποίες καθορίστηκαν στο πρώτο στάδιο.

Ετσι. Φέρνουμε στην προσοχή σας ένα σετ εργαλείων για δημιουργώντας αρθρωτά πλέγματα PSD και CSS, που θα διευκολύνει πολύ τη δημιουργία του site.

Responsify.it

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

Υπολογιστής Πλέγματος

Το αγαπημένο μου αρθρωτό εργαλείο πλέγματος, το οποίο χρησιμοποιώ τακτικά. Αυτό είναι βέβαιο αριθμομηχανή, το οποίο θα σας ενημερώσει αμέσως ποιο θα είναι το πλάτος της στήλης για ορισμένες παραμέτρους του αρθρωτού πλέγματος Αυτό είναι πολύ βολικό και χρήσιμο. Υπολογιστής Πλέγματοςεπιτρέπει δημιουργούν αρθρωτά πλέγματασε μορφή PNG, διανυσματικές εικόνες και μοτίβα για το Photoshop JSX

Αρθρωτό μοτίβο πλέγματος

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

Ας συνεχίσουμε το θέμα προσαρμοστική διάταξη. Σήμερα θα μιλήσουμε για έναν από τους τρεις πυλώνες της προσαρμοστικής διάταξης - διάταξη με βάση το πλέγμα(ευέλικτη διάταξη βάσει πλέγματος). Οι άλλες δύο είναι ευέλικτες εικόνες.

Στα μέσα του 20ου αιώνα, οι γραφίστες διέδωσαν την ιδέα τυπογραφικός, ή αρθρωτό, διχτυωτό- ένα ορθολογικό σύστημα στηλών και γραμμών στις οποίες θα μπορούσαν να τοποθετηθούν ενότητες με περιεχόμενο. Φαινόταν φρέσκο ​​και πολύ αρμονικό.

Ωστόσο, το graphic design και το web design είναι, όπως λένε στην Οδησσό, δύο μεγάλες διαφορές. Το βασικό σημείο εδώ είναι το μέγεθος της σελίδας. Στην τυπογραφία, διορθώνεται, αλλά μια ιστοσελίδα μπορεί να τεντωθεί και να συρρικνωθεί ανάλογα με το τι προβάλλεται.

Για να εφαρμόσετε ένα αρθρωτό πλέγμα σε μια ιστοσελίδα, χρησιμοποιήστε έναν απλό τύπο αναλογικότητας:

στόχος/πλαίσιο=αποτέλεσμα

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

Θα το καλύψουμε με λάστιχο. Αλλά εδώ είναι το πρόβλημα: πώς να ορίσετε το πλάτος και των δύο μπλοκ; Άλλωστε, αν το γράψετε σε pixel, τότε δεν θα είναι πλέον καουτσούκ. Αυτό σημαίνει ότι πρέπει να χρησιμοποιήσετε ποσοστά, όχι pixel. Αλλά με συγχωρείτε, τι αξίες να γράψω; Παρόλα αυτά, πρέπει να ξεκινήσετε από κάτι.

Μπορείτε, φυσικά, να υπολογίσετε με το μάτι: το περιεχόμενο καταλαμβάνει περίπου το 70% του συνολικού πλάτους της σελίδας και η πλευρική γραμμή - 30%. Αλλά ο σωστός σχεδιαστής διάταξης δεν μαντεύει ποτέ τίποτα με το μάτι. Χρειαζόμαστε το ακριβές μέγεθος.

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

660 / 960 = 0,6875
300 / 960 = 0,3125

Το μόνο που μένει είναι να μετατρέψουμε αυτά τα δεδομένα σε ποσοστά. Χωρίς να ανησυχείτε πολύ, απλώς μετακινήστε το κόμμα δύο θέσεις προς τα δεξιά. Παίρνουμε:

68,75%
31,25%

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

Από τη διάταξη του σχεδιασμού γνωρίζουμε ότι το πλάτος αυτής της στενής στήλης είναι 120 pixel και η ευρεία είναι 520. Πώς να μετατρέψετε αυτούς τους αριθμούς σε %; Και πάλι, εφαρμόστε τον τύπο αναλογίας. Αλλά αυτή τη φορά, ως πλαίσιο, δεν χρησιμοποιούμε ολόκληρο το πλάτος της σελίδας, αλλά το πλάτος του μπλοκ που περιέχει αυτές τις δύο στήλες, δηλαδή το πλάτος του τμήματος περιεχομένου, που είναι 660 pixel. Διαιρέστε:

120 / 660 = 0,1818
520 / 660 = 0,7878

Ως ποσοστό παίρνουμε 18,18% και 78,78%, αντίστοιχα.

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

περιεχόμενο (
πλάτος: 68,75%; /* 660px / 960px */
}

Ελπίζω να μην υπάρχουν δυσκολίες με αυτό. Ας προχωρήσουμε!

Διάταξη με βάση το πλέγμα

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

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

Στην πραγματικότητα, τέτοιες υπηρεσίες είναι πλέον μια δεκάρα! Ονομάζονται επίσης πλαίσια. Επιλέξτε ποιο σας αρέσει περισσότερο. Ακολουθεί μια μεγάλη επιλογή 30 πλαισίων CSS για αποκριτικό σχεδιασμό ιστοσελίδων.

Σε τι χρησιμεύουν ακόμη και αυτά τα αρθρωτά πλέγματα;

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

Επιπλέον, τέτοια αρθρωτά πλέγματα είναι πολύ πιο εύκολο να γίνουν προσαρμοστικά από τα τυχαία διάσπαρτα μπλοκ διαφορετικών μεγεθών.

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

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

Την επόμενη φορά θα μιλήσουμε για ευέλικτες εικόνες σε προσαρμοστική διάταξη. Ένα πολύ σημαντικό και αμφιλεγόμενο θέμα. Προτείνω επίσης να το μελετήσετε διεξοδικά για να μην μπείτε σε μπελάδες. Να κρατήσουμε επαφή! Ακόμα καλύτερα, εγγραφείτε στο ενημερωτικό δελτίο ιστολογίου του Συμβουλίου Web.

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

1. Σκελετός

Σκελετόςείναι ένα σύνολο αρχείων CSS, συν ένα πρότυπο PSD για σχεδιαστές ιστοσελίδων. Αυτά τα αρχεία, σύμφωνα με τους συντάκτες του Skeleton, θα σας βοηθήσουν να δημιουργήσετε μια διάταξη με απόκριση. Ο σκελετός έχει επίσης επαναφορά στυλ, κάτι που είναι βολικό. Από προεπιλογή, ο σκελετός βασίζεται σε ένα πλέγμα 960 px (για οθόνες πλάτους 980 px), τα μπλοκ σκελετού έχουν σταθερό πλάτος. τα μπλοκ προσαρμόζονται στο πρόγραμμα περιήγησης λόγω του χώρου γύρω από τον ιστότοπο. Όταν αλλάζετε το παράθυρο του προγράμματος περιήγησης, η οριζόντια κύλιση δεν εμφανίζεται.

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

2. Απλό Πλέγμα

Εάν είστε μινιμαλιστής, τότε αυτό το πλέγμα θα σας ταιριάζει. Το προεπιλεγμένο πλάτος πλέγματος δεν υπερβαίνει τα 1140 εικονοστοιχεία. Σύμφωνα με τους συντάκτες του πλέγματος, η δημιουργία μιας τοποθεσίας με μικρότερο μέγιστο πλάτος είναι λάθος. Σε αντίθεση με τον σκελετό απλό πλέγμασυμπεριφέρεται με απόκριση και ικανοποιεί την έννοια του responsive design. Όπως ήδη αναφέρθηκε, το μέγιστο πλάτος πλέγματος είναι 1140 εικονοστοιχεία, αλλά η αλλαγή αυτής της τιμής δεν είναι δύσκολη, αφού όλα τα μπλοκ πλέγματος ορίζονται σε ποσοστά: αυτό σημαίνει αποκριτικός σχεδιασμός! Στο ίδιο το αρχείο css υπάρχει μόνο ένα ερώτημα πολυμέσων:
@mediahandheld, onlyscreenand (μέγιστο πλάτος: 767px) , το οποίο μπορεί να σημειωθεί ως μειονέκτημα.

Κατ 'αρχήν, το πράγμα είναι βολικό, αλλά κατά την ανάπτυξη, πιθανότατα, θα πρέπει να τροποποιηθεί.

Το Simple Grid είναι η βάση για ένα ελαφρύ πλέγμα, αλλά το Simple Grid δεν είναι ένα πλαίσιο CSS. Το Simple Grid δεν διαθέτει στυλ για κουμπιά, πίνακες, γραμματοσειρές κ.λπ. Το Simple Grid λειτουργεί με δύο διαφορετικούς τύπους πλεγμάτων. Υπάρχει ένα πλέγμα περιεχομένου που μοιάζει

και ένα πλέγμα διάταξης που μοιάζει . Το Simple Grid υποστηρίζει επίσης αποκριτικές διατάξεις. Το πλέγμα έχει λαστιχένιες στήλες και το πλέγμα αλλάζει επίσης το μέγεθός του ανάλογα με το μέγεθος του παραθύρου του προγράμματος περιήγησης. Για κινητές συσκευές, το πλέγμα τακτοποιεί τις στήλες του σε μια στοίβα, τη μία κάτω από την άλλη.

Απλές ρυθμίσεις πλέγματος

Οι βασικές ρυθμίσεις του Simple Grid είναι παρόμοιες με οποιοδήποτε άλλο πλέγμα. Πρώτα πρέπει να τυλίξετε το πλέγμα σας σε ένα div με μια κλάση πλέγματος. Εάν θέλετε το πλέγμα να έχει συμπλήρωση 20 εικονοστοιχείων, προσθέστε μια κατηγορία πλέγματος-pad. Στη συνέχεια, με βάση τις προτιμήσεις μεγέθους πλέγματος, προσθέστε τις κλάσεις που θέλετε. Για παράδειγμα, εάν θέλετε ένα πλέγμα με αριστερή στήλη και κύριο μπλοκ (για περιεχόμενο), χρησιμοποιήστε τον ακόλουθο κώδικα:

HTML

Εάν θέλετε να πάρετε με 4 στήλες (για περιεχόμενο), μπορείτε να χρησιμοποιήσετε κώδικα όπως αυτός:

HTML

Η πρώτη στήλη (για το περιεχόμενο) του πλέγματος μας είναι πάντα φτιαγμένη να επιπλέει σε σχέση με την αριστερή άκρη του μπλοκ περιτυλίγματος. Εάν θέλετε να κάνετε τη στήλη να επιπλέει σε σχέση με τη δεξιά άκρη, προσθέστε την κλάση push-right.

Για παράδειγμα, τα css-tricks λειτουργούν με βάση το Simple Grid..

Σχετικά Άρθρα:

• μετάφραση του άρθρου "Don't Overthink It Grids" στο habrahabr.ru - Πλέγματα χωρίς προβλήματα

3. Βαθύ Πλέγμα

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

4. Ταψί

Ταψί(github.com/necolas/griddle) είναι ένα πλέγμα για σχεδιαστές ιστού που στοχεύουν σύγχρονα προγράμματα περιήγησης (IE8+). Το αρχείο CSS δημιουργείται χρησιμοποιώντας συναρτήσεις Sass και mixins. Η χρήση των ιδιοτήτων inline-block και box-sizing δίνει στη διάταξη νέες δυνατότητες σε σύγκριση με τις διατάξεις που βασίζονται σε κυμαινόμενα μπλοκ. Μειονεκτήματα: το πλέγμα δεν έχει αρχείο css, μόνο sass. Δεν είναι δυνατή η λήψη του παραδείγματος. μόνο σασ.

5. Πλέγματα Extra Strength Responsive

Εάν πιστεύετε ότι άλλα πλέγματα css σας περιορίζουν, εάν προτεραιότητά σας είναι ο πλήρης έλεγχος του τρόπου με τον οποίο η αποκριτική διάταξη προσαρμόζεται σε διαφορετικές οθόνες, εάν ανησυχείτε για τα ονόματα κλάσεων στο css σας, τότε μπορεί να σας φανεί χρήσιμο Πλέγματα Extra Strength Responsive.

6. Αναλογικά Πλέγματα

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

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

7. Τακτοποιημένο

Η περιγραφή θα εμφανιστεί αργότερα

8. csswizardry-grids

Η περιγραφή θα εμφανιστεί αργότερα

9. Dead Simple Grid

Η περιγραφή θα εμφανιστεί αργότερα

10. Responsive Grid System

Η περιγραφή θα εμφανιστεί αργότερα

Καλώς ήρθατε στο Design Pantry!

Ονομάζομαι Andrey Gavrilov και χαίρομαι που σας καλωσορίζω στη νέα μου εκπομπή ασυνήθιστης μορφής.

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

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

Αρθρωτά πλέγματα

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

Σήμερα θα ασχοληθούμε με ένα από τα πιο σημαντικά θέματα στη δουλειά ενός σύγχρονου σχεδιαστή ιστοσελίδων. Αυτά είναι αρθρωτά πλέγματα. Βομβαρδίζομαι καθημερινά με ερωτήσεις σχετικά με το τι πλέγμα να χρησιμοποιήσω; Σε ποιες περιπτώσεις πρέπει να χρησιμοποιήσω 12 στήλες, 14 στήλες, 1170 εικονοστοιχεία ή 960 εικονοστοιχεία ή ίσως 940 εικονοστοιχεία;

Σήμερα θα καλύψουμε όλες αυτές τις ερωτήσεις σε ένα απλό μάθημα.

Πηγαίνω...

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

Σημείο διακοπής

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

Για να δείτε με ένα παράδειγμα τι είναι ένα σημείο διακοπής και πώς λειτουργεί η προσαρμοστικότητα, μπορείτε να ανοίξετε οποιονδήποτε ιστότοπο που ανταποκρίνεται (προσαρμοστικό). Εδώ είναι η προσωπική μου ιστοσελίδα andrewgavrilov.me, μπορείτε να πάτε σε αυτήν και να τη δοκιμάσετε με τον ίδιο τρόπο. Στην επιφάνεια εργασίας μου με ανάλυση 1600 px, ο ιστότοπος μοιάζει ακριβώς έτσι.

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

Σε tablet 768 px, τα εργαλεία dev μάς δείχνουν ότι ο ιστότοπος μοιάζει με αυτό.

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

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

Bootstrap

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

Αυτό έχει γίνει τόσο δημοφιλές σήμερα που είναι ουσιαστικά το πρότυπο. Όλοι οι προγραμματιστές και οι σχεδιαστές διάταξης εργάζονται ειδικά σε αυτό το πλαίσιο. Δεν θα μπω σε λεπτομέρειες και θα σας πω τι είναι, θα πω μόνο ότι το συγκεκριμένο πλαίσιο επιταχύνει τη διάταξη, και έχει τα δικά του τεχνικά χαρακτηριστικά. Επομένως, θεωρείται φυσιολογικό, ακόμη και τυπικό, αν αναπτύξετε το σχέδιό σας σε αρθρωτά πλέγματα που ακολουθούν το Bootstrap.

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

Ας πάμε στην καρτέλα CSS και μεταβούμε στην ενότητα Grid System.

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

Το Bootstrap θεωρεί πολύ μικρές συσκευές ως τηλέφωνα με ανάλυση μικρότερη από 768 px, επομένως στην περιοχή από 0 έως 768 ετοιμάζουμε την πρώτη διάταξη. Ακολουθούν οι μικρές συσκευές - ταμπλέτες, η ανάλυσή τους είναι μεγαλύτερη από 768 px, αλλά μικρότερη από 992 px, μετά οι μεσαίες συσκευές (επιτραπέζιοι υπολογιστές) ξεκινούν από 992 px. Και οι συσκευές με ανάλυση μεγαλύτερη από 1200 px θεωρούνται μεγάλες συσκευές (μεγάλοι επιτραπέζιοι υπολογιστές).

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

Θα σας πω ένα δεύτερο μυστικό που θα σας καθησυχάσει - δεν υπάρχουν κανόνες. Εάν καλύπτουμε το εύρος, για παράδειγμα, από 320 εικονοστοιχεία έως εικονοστοιχεία, μπορείτε να προετοιμάσετε μια διάταξη για 320 εικονοστοιχεία, 768 εικονοστοιχεία, 322 εικονοστοιχεία, 327 εικονοστοιχεία.

Καταλαβαίνετε ποιο είναι το νόημα; Δεν υπάρχει διαφορά.

Γι' αυτό σας έχω ετοιμάσει ειδικά αρχεία, αρθρωτά πλέγματα με τα οποία θα δουλέψετε. Χρησιμοποιώ αυτά τα αρθρωτά πλέγματα στη δουλειά μου. Μπορείτε επίσης να κατεβάσετε παρόμοια.

Το κύριο πράγμα για εσάς είναι ότι η διάταξή σας, η οποία έχει μήκος περίπου 480 εικονοστοιχεία, εμπίπτει στο εύρος που καλύπτει το συγκεκριμένο πλέγμα. Μπορείτε ήδη να εργαστείτε σε αυτό το πλέγμα όπως θέλετε. Παρεμπιπτόντως, για να ενεργοποιήσετε ή να απενεργοποιήσετε τους οδηγούς, πρέπει να χρησιμοποιήσετε τον συνδυασμό πλήκτρων ctrl+H.

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

Ακολουθεί ένα πρότυπο για μικρές συσκευές που είναι μεγαλύτερες από 768 εικονοστοιχεία.

Οι μέσες συσκευές είναι μεγαλύτερες από 992 px.

Και μεγάλο, πάνω από 1170 px.

Χρησιμοποιώ αυτήν την τιμή στη διάταξη, είτε στα 1170 px είτε στα 1200 px - δεν έχει σημασία, γιατί αυτό είναι το πλάτος της συσκευής, όχι το πλέγμα. Εκείνοι. το πλέγμα μπορεί να είναι οποιοδήποτε για το πλάτος αυτής της συσκευής. Μην ενοχλείτε και απλώς χρησιμοποιήστε αυτά τα πλέγματα στην εργασία σας.

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

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

Εργασία με αρθρωτά πλέγματα

Τώρα το δεύτερο σημείο είναι πώς να εργαστείτε με αρθρωτά πλέγματα. Υπάρχει μια άποψη που πολλοί άνθρωποι τηρούν και η οποία κρατά μακριά τους αρχάριους σχεδιαστές - κάθε στοιχείο πρέπει να καταλαμβάνει έναν σαφώς καθορισμένο αριθμό στηλών, να ξεκινά από τη μια άκρη των στηλών, να τελειώνει στην άλλη - και μόνο αυτό. Αν όλοι κάναμε τα σχέδιά μας έτσι, θα ήταν βαρετά, μονότονα και χωρίς ενδιαφέρον. Γι' αυτό το πλέγμα είναι ένα στοιχείο καθοδήγησης, προτροπής, αλλά σε καμία περίπτωση που δεν σας υπαγορεύει, και αυτό είναι σημαντικό να το κατανοήσετε.

Οι βασικές αρχές είναι οι εξής: υπάρχει ένα στρώμα εδώ που άλλοτε το κρύβω, άλλοτε το δείχνω, αλλά πιο συχνά είναι κρυμμένο.

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

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

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

Στην πραγματικότητα, όχι, είναι μόνο μία γραμμή κώδικα, οπότε μην ανησυχείτε αν το στοιχείο σας δεν ξεκινά από την αριστερή άκρη της στήλης. Εάν δεν τελειώνει στη δεξιά άκρη της στήλης, τότε δεν είναι επίσης πρόβλημα. Μπορείτε απλώς να δοκιμάσετε να το «τραβήξετε» έτσι ώστε να καταλήγει μέσα στη στήλη.

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

Αυτή η θέση σε σχέση με το αρθρωτό πλέγμα είναι απολύτως σωστή. Δεν είναι όλα τέλεια εδώ - το μενού δεν τελειώνει στη δεξιά άκρη της στήλης, το τηλέφωνο δεν ξεκινά και τελειώνει στις άκρες των στηλών, το κουμπί δεν φτάνει στην άκρη της στήλης. Μπορείτε να φανταστείτε αν όλοι χρησιμοποιούσαν το ίδιο πλέγμα και όλοι είχαν τα ίδια μήκη στοιχείων; Επομένως, είναι απολύτως φυσιολογικό όταν έχετε αυτήν την κατάσταση.

Το πρόβλημα θα είναι αν το κάνετε ως εξής:

Αυτό δεν είναι πλέον πολύ καλό. Το μενού ξεκινά στο κενό, το τηλέφωνο ξεκινά στο κενό. Δεν είναι πρόβλημα ότι τελειώνει στο ενδιάμεσο, αλλά αυτό που ξεκινά από εκεί είναι πραγματικά το πρόβλημα. Φυσικά, όλα αυτά μπορούν να παιχτούν σε διάταξη. Αλλά αυτό είναι ακόμα αναλφάβητο και αντιεπαγγελματικό. Φροντίστε να μην υπάρχουν τέτοιες στιγμές στη δουλειά σας.

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

Ελπίζω να καταλάβατε τι είναι τα αρθρωτά πλέγματα, πώς να τα χρησιμοποιείτε σωστά, πότε, πού και γιατί.

Τελικά

Τα λέμε σε μια εβδομάδα, σε νέο βίντεο, σε νέο επεισόδιο του «Pantry Design». Και για να καταλάβω ότι σας αρέσει αυτή η μορφή, πόσο χρήσιμο είναι αυτό το βίντεο - σηκώστε τα δάχτυλά σας, εγγραφείτε στο κανάλι και αφήστε τα σχόλιά σας. Τότε θα ξέρω τι σας ενδιαφέρει και θα απαντήσω στις ερωτήσεις σας.

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

Ας κάνουμε ένα βήμα πίσω, ας πάρουμε μια βαθιά ανάσα και ας αναρωτηθούμε: θα χρησιμοποιήσουμε πραγματικά και τις 24 επιλογές, και ένα εκατομμύριο συνδυασμούς τους, που μας δίνει το “This Coolest Framework”; Συχνά χρειαζόμαστε μια απλή, ευέλικτη λύση, με περιορισμένο αριθμό παραλλαγών και με βάση κώδικα που μπορούμε να επεκτείνουμε ανά πάσα στιγμή. Θέλω να μιλήσω για τέσσερις τεχνικές για την υλοποίηση δικτύων CSS, οι οποίες είναι όλες εύκολα επεκτάσιμες. Αυτοί είναι οι τέσσερις τρόποι:

1. Προσαρμοστική διάταξη πλέγματος #1 (χρησιμοποιώντας αρνητική γέμιση)
2. Προσαρμοστική διάταξη πλέγματος #2 (χρησιμοποιώντας το μέγεθος κουτιού: πλαίσιο-πλαίσιο)
3. Προσαρμοστική διάταξη πλέγματος με βάση την εμφάνιση πίνακα
4. Αποκριτική διάταξη πλέγματος που βασίζεται σε Flexbox

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

Γενικό CSS

Πριν βουτήξουμε σε κάθε μέθοδο, ας ρίξουμε μια ματιά στα κοινά στυλ που θα χρησιμοποιήσουμε σε όλα τα παραδείγματα. Θα χρησιμοποιήσω τη δήλωση box-sizing: border-box για όλα τα στοιχεία του εγγράφου και θα προσθέσω επίσης μια κλάση .clearfix για την εκκαθάριση των αιωρούμενων πλαισίων. Εδώ είναι το βασικό μας CSS:

/* επαναφορά ιδιοτήτων */ *, *:before, *:after ( box-sizing: border-box; ) .clearfix:after ( content: ""; display: table; clear: two; )

Μέθοδος 1: χρησιμοποιήστε αρνητική επένδυση

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

/* πλέγμα */ ( margin-bottom: 20 px; ) :last-child ( margin-bottom: 0; ) ( ) @media all and (min-width: 768px) ( /* all cols margin */ ( margin-right : 20 px ) :last-child ( margin-right: 0; ) /* κάνουν τις στήλες προσαρμοστικές */ .col-1-2 ( float: αριστερά; πλάτος: 50%; ) .col-1-4 (float: αριστερά ; πλάτος: 25%; - παιδί ( margin-left: -20 px; ) /* 4 span lines */ .row-4 ( padding-left: 60px; ) .row-4 :first-child ( margin-left: -60px; ) /* 8 span rows */ .row-8 ( padding-left: 60px; ) .row-8 :nth-child(4n+1) ( margin-left: -60px; ) .row-8 :nth-child(5n-1 ) ( margin-right: 0; ) .row-8 :nth-child(6n-1) ( clear: two; ) ) @media all and (min-width: 1200px) ( /* adjust width */ .col- 1 -8 ( float: αριστερά; πλάτος: 12,5%; ) /* 8 span lines */ .row-8 ( padding-left: 140px; ) /* reset these... */ .row-8 :nth-child ( 4n+1) ( περιθώριο-αριστερά: 0; ) .row-8 :nth-child(5n-1) ( margin-right: 20px; ) .row-8 :nth-child(6n-1) ( clear: none; ) /* και προσθέστε αυτό */ .row-8 :nth-child(1) (margin-αριστερά: -140px; ) )

Όπως μπορείτε να δείτε, στις συνθήκες ερωτήματος μέσων, μια σταθερή τιμή εσοχής (ας την ονομάσουμε x) πολλαπλασιάζεται με τον αριθμό των στηλών στη γραμμή μείον 1 (n-1) και αυτή η εσοχή εφαρμόζεται στη γραμμή στα αριστερά . Κάθε στήλη, εκτός από την τελευταία, έχει μια σταθερή δεξιά εσοχή (x). Και στην πρώτη στήλη της γραμμής δίνεται αρνητική εσοχή (n-1)*x

Μειονεκτήματα και λάθη

Απαιτούνται ορισμένοι υπολογισμοί και η μέθοδος καθίσταται μη πρακτική καθώς αυξάνεται ο αριθμός των στηλών. Επιπλέον, καθώς αυξάνουμε τον αριθμό των βημάτων (τον αριθμό των διαβαθμίσεων των ερωτημάτων μέσων, για παράδειγμα, 1 στήλη ανά σειρά, 4, 8...), πρέπει να επαναφέρουμε το CSS και πρέπει να χρησιμοποιήσουμε πολλά μαθηματικούς υπολογισμούς.

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

Οφέλη και χρήση στην πράξη

Η πραγματική ομορφιά αυτής της μεθόδου είναι η δημιουργία συνδυασμών πλέγματος σταθερού/μεταβλητού μεγέθους. Για παράδειγμα, ας φανταστούμε μια κύρια περιοχή περιεχομένου μεταβλητού πλάτους και μια πρόσθετη πλευρική περιοχή σταθερού πλάτους. Ο κώδικας HTML μας μπορεί να μοιάζει κάπως έτσι:

Και το CSS έχει ως εξής:

/* σήμανση */ .primary ( margin-bottom: 20px; ) @media all and (min-width: 600px) ( .container ( padding-right: 300px; ) .primary (float: left; padding-right: 60px; πλάτος: 100%;

Ακολουθεί μια επίδειξη του κώδικα σε δράση στο CodePen:

Μέθοδος 2: χρησιμοποιήστε το μέγεθος του κουτιού: πλαίσιο-πλαίσιο

Αυτή η μέθοδος χρησιμοποιεί την πλήρη ισχύ του box-sizing: border-box . Εφόσον αυτή η ιδιότητα μάς επιτρέπει να προσθέτουμε περιθώρια σε ένα στοιχείο χωρίς η τιμή τους να επηρεάζει το συνολικό πλάτος του στοιχείου, μπορούμε ακόμα να επιτύχουμε ένα ευέλικτο πλέγμα με σταθερό "γέμισμα". Αλλά εδώ, αντί να χρησιμοποιήσουμε την ιδιότητα περιθωρίου, θα χρησιμοποιήσουμε εσωτερικά περιθώρια, τα οποία θα λειτουργούν ως γέμιση μεταξύ των στοιχείων του πλέγματος.

Σήμανση:

Θα παραλείψουμε τα εντυπωσιακά μαθηματικά εδώ, οπότε το CSS μας θα είναι πολύ απλό. Και εδώ είναι, με δυνατότητα διάταξης έως και 8 στηλών:

/* grid */ .row ( margin: 0 -10 px; margin-bottom: 20 px; ) .row:last-child ( margin-bottom: 0; ) ( padding: 10px; ) @media all and (min-width: 600 εικονοστοιχεία) ( .col-2-3 ( float: αριστερά; πλάτος: 66,66%; ) .col-1-2 ( float: αριστερά; πλάτος: 50%; ) .col-1-3 ( float: αριστερά; πλάτος: 33,33% ) .col-1-4 (float: αριστερά; πλάτος: 25%; )

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

Ας επεκτείνουμε αυτή τη μέθοδο:

Ας υποθέσουμε ότι θα θέλατε τα στοιχεία .col-8 να χωριστούν πρώτα 4 ανά σειρά και μετά 8 ανά σειρά Αυτό είναι πολύ απλό να το εφαρμόσετε αν το σκεφτείτε λίγο. Για την παραπάνω σήμανση, το CSS μας θα μοιάζει με αυτό:

@media all και (ελάχ. πλάτος: 600 εικονοστοιχεία) ( .col-1-8 ( float: αριστερά; πλάτος: 25%; ) .col-1-8:nth-child(4n+1) ( καθαρό: και τα δύο; ) ) @media all και (ελάχ. πλάτος: 960 εικονοστοιχεία) ( .col-1-8 ( πλάτος: 12,5%; ) .col-1-8:nth-child(4n+1) ( καθαρό: κανένα; ) )

Μέθοδος 3: χρησιμοποιήστε την εμφάνιση πίνακα

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

Και, κατά συνέπεια, CSS:

/* grid */ .row ( margin: 0 -10 px; margin-bottom: 10 px; ) .row:last-child ( margin-bottom: 0; ) ( padding: 10px; ) @media all and (min-width: 600 εικονοστοιχεία) ( .row ( οθόνη: πίνακας, διάταξη πίνακα: σταθερό .col-1-2 ( πλάτος: 50%; ) .col-1-3 (πλάτος: 33,33%; ) .col-1-4 ( πλάτος: 25%; ) .col-1-8 ( πλάτος: 12,5% ) )

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

Μέθοδος 4: Flexbox

Η τελευταία μέθοδος που θα περιγράψω χρησιμοποιεί τη λειτουργική μονάδα flexbox. Σύμφωνα με το MDN:

Το CSS3 Flexible Box, ή flexbox, είναι μια λειτουργία διάταξης που παρέχει τη δυνατότητα να τακτοποιήσετε στοιχεία σε μια σελίδα έτσι ώστε να συμπεριφέρονται προβλέψιμα σε διαφορετικά μεγέθη οθόνης και συσκευές.

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

Τώρα ας δούμε το νέο μας CSS:

/* grid */ .row ( display: flex; flex-flow: row wrap; margin: 0 -10 px; margin-bottom: 10 px; ) .row:last-child ( margin-bottom: 0; ) ( padding: 10px ; πλάτος: 100%; ) .col-1-3 (πλάτος: 33,33%; ) .col-1-4 (πλάτος: 25%; ) .col-1-8 (πλάτος: 12,5%; )

Σε αυτήν την περίπτωση, για τις γραμμές πρέπει να ορίσετε την ιδιότητα εμφάνισης σε flex και επίσης να καθορίσετε την ιδιότητα flex-flow. Ένας πλήρης ορισμός και περιγραφή αυτών των ιδιοτήτων είναι διαθέσιμη στην τεκμηρίωση MDN για το flexbox. Για ένα ερώτημα μέσων, απλώς αλλάζουμε το πλάτος των στηλών και αφήνουμε το flexbox να κάνει τα υπόλοιπα για εμάς.

συμπέρασμα

Εξετάσαμε 4 τρόπους για να δημιουργήσουμε αποκριτικά πλέγματα χρησιμοποιώντας CSS, το καθένα με τα δικά του πλεονεκτήματα και μειονεκτήματα. Δεν υπάρχει απόλυτος τρόπος να κάνω κάτι και συχνά βρίσκομαι σε καταστάσεις όπου ένας τρόπος είναι καλύτερος από τον άλλο ή πρέπει να συνδυάσω πολλές επιλογές. Οι μέθοδοι 1 και 2 είναι οι αγαπημένες μου και τις χρησιμοποιώ συχνά στα έργα μου (βασική διάταξη χρησιμοποιώντας τη μέθοδο 1 και προσαρμοστικά πλέγματα χρησιμοποιώντας τη μέθοδο 2).

Όπως αναφέρθηκε προηγουμένως, η τρίτη μέθοδος έχει τα πλεονεκτήματά της, αλλά προτιμώ να χρησιμοποιώ διατάξεις πίνακα μόνο όταν είναι απολύτως απαραίτητο. Η μέθοδος 4 είναι υπέροχη και ανυπομονώ να τη μεταφέρω σε όλα μου τα έργα. Το Flexbox κερδίζει έλξη, αλλά υποστηρίζεται μόνο σε IE10 και άνω. Υπάρχουν polyfills για αυτό, αλλά προτιμώ να κάνω χωρίς αυτά. Αν και σήμερα υπάρχουν σενάρια στα οποία το flexbox θα ήταν μια εξαιρετική λύση (για παράδειγμα, σε προγράμματα περιήγησης για κινητά όπου δεν υπάρχει IE).

Κάθε μία από αυτές τις μεθόδους είναι εύκολα επεκτάσιμη και επεκτάσιμη. Χρησιμοποιώντας τις ιδέες που παρουσιάζονται, μπορείτε εύκολα να προσαρμόσετε τη δική σας αποκριτική διάταξη με την επιθυμητή τοποθέτηση στοιχείων πλέγματος με ελάχιστη ποσότητα CSS. Η μονάδα CSS grids είναι καθ' οδόν, αλλά θα χρειαστεί λίγος χρόνος για να μπορέσουμε να τη χρησιμοποιήσουμε. Ελπίζω να σας άρεσε το άρθρο και τώρα να σας τρομάζει λιγότερο χρησιμοποιώντας πλέγματα CSS.