Πώς να δημιουργήσετε Responsive τυπογραφία με CSS

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

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

Σημασία της ανταποκρινόμενης τυπογραφίας

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

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

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

Το αρχείο κώδικα HTML

index.html
html>
<htmllang="en">
<κεφάλι>
<μετασύνολο χαρακτήρων="UTF-8">
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1.0">
<Σύνδεσμοςσχετ="φύλλο στυλ"href="style.css">
<τίτλος> Αποκρινόμενη τυπογραφία τίτλος>
κεφάλι>
<σώμα>
<divτάξη="δοχείο">
<h1> Lorem ipsum h1>
<Π> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
Π>
div>
σώμα>
html>

Το αρχείο κώδικα CSS

/*style.css*/
σώμα{
απεικόνιση: καλώδιο;
δικαιολογώ-περιεχόμενο: κέντρο;
στοίχιση-στοιχεία: κέντρο;
ύψος: 100vh;
}
.δοχείο{
πλάτος: 400px;
χρώμα του φόντου: αντικελευκό;
υλικό παραγεμίσματος: 15px;
κουτί-σκιά:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
χρώμα: καυτό ροζ;
}

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

1. Σύσφιξη

Αυτή είναι μια σύγχρονη τεχνική τυπογραφίας CSS που επιτρέπει και διασφαλίζει ότι το μέγεθος της γραμματοσειράς ενός στοιχείου παραμένει εντός ενός συγκεκριμένου εύρους. Η συνάρτηση σφιγκτήρα "Clamp()" λαμβάνει τρεις παραμέτρους, την ελάχιστη τιμή, την ιδανική τιμή και τη μέγιστη τιμή. Η λειτουργία σφιγκτήρα δεν περιορίζεται στην τυπογραφία. Μπορεί να χρησιμοποιηθεί για εικόνες, κάρτες, βίντεο και άλλα μέσα. Ετσι δουλεύει.

Σφιγκτήρας (ελάχιστη τιμή, ιδανική τιμή, μέγιστη τιμή):

h1{
μέγεθος γραμματοσειράς: σφιγκτήρας(2rem, 5vw, 3rem);
}
Π{
μέγεθος γραμματοσειράς: σφιγκτήρας(1rem, 3vw, 2rem);
}

Σε αυτό το παράδειγμα, τα μεγέθη γραμματοσειράς για την επικεφαλίδα και την παράγραφο ορίζονται χρησιμοποιώντας τη συνάρτηση "clamp()". Για την επικεφαλίδα "h1" η ελάχιστη τιμή έχει οριστεί σε "2rem" διασφαλίζοντας ότι το μέγεθος της γραμματοσειράς δεν θα είναι κάτω από το διπλάσιο του μεγέθους γραμματοσειράς ρίζας. Η ιδανική ή προτιμώμενη τιμή έχει οριστεί σε "5vw", που είναι το 5% του πλάτους της θύρας προβολής, καθιστώντας το να ανταποκρίνεται σε διαφορετικά μεγέθη οθόνης. Η μέγιστη τιμή έχει οριστεί σε "3 rem" διασφαλίζοντας ότι το μέγεθος της γραμματοσειράς δεν θα είναι μεγαλύτερο από το τριπλάσιο του μεγέθους της ριζικής γραμματοσειράς. Το αντίστροφο για το στυλ της παραγράφου.

Είναι καλύτερη πρακτική να χρησιμοποιείτε το πλάτος της θύρας προβολής "vw" ή το ποσοστό "%" για την ιδανική τιμή, καθώς επιτρέπει στην ιδιότητα να κλιμακώνεται αναλογικά με βάση τον διαθέσιμο χώρο, καθιστώντας τη σχεδίαση πιο αποκριτική. Βεβαιωθείτε ότι γνωρίζετε ποια μονάδα CSS πρέπει να χρησιμοποιήσετε για το σενάριο σου.

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

/* Προεπιλεγμένο μέγεθος γραμματοσειράς */
h1{
μέγεθος γραμματοσειράς: 38px;
}
Π{
μέγεθος γραμματοσειράς: 20px;
}
/* Μέγεθος γραμματοσειράς για μικρές οθόνες */
@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ (μέγιστο πλάτος:800 px){
h1{
μέγεθος γραμματοσειράς: 32px;
}
Π{
μέγεθος γραμματοσειράς: 18px;
}
}
/* Μέγεθος γραμματοσειράς για μικρότερες οθόνες */
@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ (μέγιστο πλάτος:400 εικονοστοιχεία){
h1{
μέγεθος γραμματοσειράς: 28px;
}
Π{
μέγεθος γραμματοσειράς: 15px;
}
}

Σε αυτό το παράδειγμα, η επικεφαλίδα και η παράγραφος έχουν οριστεί σε μια προεπιλεγμένη τιμή από "38px" έως "20px" αντίστοιχα. Στη συνέχεια, ορίζονται προϋποθέσεις για μικρότερα μεγέθη οθόνης ώστε η διάταξη να αποκρίνεται στα κινητά τηλέφωνα. Μπορείτε να δημιουργήσετε όσα ερωτήματα πολυμέσων θέλετε με βάση το σχέδιο και την ανταπόκριση που θέλετε, μεταξύ πολλών άλλων Κόλπα CSS ερωτημάτων μέσων που πρέπει να γνωρίζετε.

3. Προσαρμοσμένες ιδιότητες CSS

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

:ρίζα {
--επικεφαλίδα-μέγεθος γραμματοσειράς: 3rem;
--παράγραφος-μέγεθος γραμματοσειράς: 1.5 εκμ;
}
h1{
μέγεθος γραμματοσειράς: var(--επικεφαλίδα-μέγεθος γραμματοσειράς);
}
Π{
μέγεθος γραμματοσειράς: var(--παράγραφος-μέγεθος γραμματοσειράς);
}
@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ (μέγιστο πλάτος:800 px){
:ρίζα {
--επικεφαλίδα-μέγεθος γραμματοσειράς: 2rem;
--παράγραφος-μέγεθος γραμματοσειράς: 0.9 εκμ;
}
}
@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ (μέγιστο πλάτος:400 εικονοστοιχεία){
:ρίζα {
--επικεφαλίδα-μέγεθος γραμματοσειράς: 1.5 εκμ;
--παράγραφος-μέγεθος γραμματοσειράς: 0.8 εκμ;
}
}

Σε αυτό το παράδειγμα, η ιδιότητα CSS έχει οριστεί σε επίπεδο ρίζας, το οποίο μας επιτρέπει να έχουμε πρόσβαση σε αυτό καθολικά. Τα --heading-font-size και --paragraph-font-size είναι περιγραφικά ονόματα για την επικεφαλίδα και την παράγραφο, αντίστοιχα, με τις προεπιλεγμένες τιμές να δίνονται και στα δύο. Αυτή η τεχνική μπορεί να επαναχρησιμοποιηθεί για διάφορα ερωτήματα μέσων για να διασφαλιστεί η συνοχή σε όλους τους τομείς.

Βέλτιστες πρακτικές αποκριτικής τυπογραφίας

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

h1{
μέγεθος γραμματοσειράς: 2vh;
 }

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

Η ανταποκρινόμενη τυπογραφία είναι το κλειδί για την αναγνώσιμη σχεδίαση ιστοσελίδων

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