5 Χρήσιμες συμβουλές για τη δημιουργία αποκριτικών διατάξεων

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

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

1. Ξεκινήστε με ένα παγκόσμιο φύλλο στυλ

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

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

Το ακόλουθο παράδειγμα CSS επαναφέρει το περιθώριο σε όλα τα στοιχεία στο 0, ορίζει την τυπογραφία και το χρώμα όλων των κύριων επικεφαλίδων και προσθέτει ένα σταθερό περιθώριο σε όλα αυτά:

σώμα,
h1,
h2,
h3,
Π {
περιθώριο: 0;
}
h1,
h2,
h3 {
χρώμα: μπλε;
γραμματοσειρά-οικογένεια: "Verdana" Σανς σέριφ;
βάρος γραμματοσειράς: 900;
ύψος γραμμής: 1;
}
h2,
h3,
Π {
περιθώριο-κάτω: 1rem;
}

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

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

2. Αποφύγετε τα σταθερά μεγέθη

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

Αντίθετα, χρησιμοποιήστε προσαρμόσιμα ύψη και πλάτη. Ένας τρόπος είναι η χρήση ελάχ. ύψος και ελάχ. πλάτος αντί ύψος και πλάτος. Για παράδειγμα, ας υποθέσουμε ότι έχετε ορίσει το πλάτος ενός στοιχείου σε 600 px. Όταν έχετε μέγεθος μικρότερο από 600 pixel, τότε το περιεχόμενο θα ξεχειλίσει:

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

Αυτό είναι το ίδιο για ύψος. Για παράδειγμα, ας υποθέσουμε ότι έχετε ορίσει το ύψος μιας κεφαλίδας σε μια σταθερή τιμή του 200 px.

επί κεφαλής {
ύψος: 200px;
απεικόνιση: πλέγμα;
τοπο-αντικείμενα: κέντρο;
}

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

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

Αυτό είναι ένα από τα Τα πιο συνηθισμένα λάθη CSS που πρέπει να αποφύγετε.

3. Να θυμάστε ότι ο ιστότοπός σας ανταποκρίνεται από προεπιλογή

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

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

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

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

Εδώ είναι ένα σενάριο. Φανταστείτε ότι το στοιχείο με όνομα κλάσης .διαίρεση έχει τρία στοιχεία μέσα του. Με το ακόλουθο CSS, θα δημιουργηθεί μια διάταξη τριών στηλών:

.διαίρεση {
απεικόνιση: καλώδιο;
flex-direction: σειρά;
χάσμα: 2rem;
}

Σε μικρότερες οθόνες (40 εκ ευρύ ή λιγότερο), θα θέλατε τα πάντα να καταλαμβάνουν μία στήλη. Θα έκανες λοιπόν αυτό:

@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ(μέγιστο πλάτος: 40 εκ) {
.διαίρεση {
απεικόνιση: ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ;
 }
}

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

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

@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ(μέγιστο πλάτος: 40 εκ) {
.διαίρεση {
απεικόνιση: καλώδιο;
flex-direction: σειρά;
χάσμα: 2rem;
 }
}

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

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

5. Επωφεληθείτε από το σύγχρονο CSS

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

Ένας τρόπος που μπορείτε να το κάνετε είναι:

h1 { μέγεθος γραμματοσειράς: clamp (3rem, 1rem + 10vw, 7rem)}

Αυτό σφίγγει το h1 μεταξύ ελάχιστου και μέγιστου μεγέθους γραμματοσειράς. Το μικρότερο στο οποίο θέλουμε να πάει είναι 3 εκ και το υψηλότερο είναι 7 εκ. Η μέση είναι αυτό που θα επαναλάβουμε (1rem + 10 vw). Ως αποτέλεσμα, ο τίτλος θα συρρικνωθεί αυτόματα καθώς η θύρα προβολής μικραίνει και θα μεγαλώνει καθώς μεγαλώνει.

Μάθετε περισσότερα για το σύγχρονο CSS

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