The Path to Elegant Responsive Text

από
Tweet
Share
Share
Pin

Το CSS (Cascading Style Sheets) είναι ένα από τα δομικά στοιχεία των διεπαφών χρήστη σε εφαρμογές ιστού, κινητών και επιτραπέζιων υπολογιστών. Αυτή η γλώσσα στυλ έχει διαφορετικές αξίες και ιδιότητες, καθιστώντας εύκολη την παροχή διαφορετικών στυλ και ιδιοτήτων στις εφαρμογές. Το REM είναι μια από τις αξίες που θα συναντήσετε πολύ καθώς κάνετε στυλ στις ιστοσελίδες σας χρησιμοποιώντας CSS.

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

Τι είναι το REM στο CSS;

Το Root-EM (REM) είναι μονάδες που υποδεικνύουν το μέγεθος γραμματοσειράς ενός στοιχείου σε σχέση με το μέγεθος γραμματοσειράς του ριζικού στοιχείου. Το REM είναι μια σχετική μονάδα, που σημαίνει ότι όλες οι τιμές που το χρησιμοποιούν θα αλλάξουν όταν αλλάξει το μέγεθος γραμματοσειράς του ριζικού στοιχείου. Το προεπιλεγμένο μέγεθος γραμματοσειράς των περισσότερων προγραμμάτων περιήγησης είναι 16 εικονοστοιχεία. Έτσι, εάν το ριζικό στοιχείο είναι 16 px, το μέγεθος REM θα είναι 1.

Οι μονάδες REM είναι το αντίθετο από τις απόλυτες μονάδες όπως τα εικονοστοιχεία. Πάρτε, για παράδειγμα, αυτόν τον κωδικό:

<div>Hello World</div>

Αυτό είναι το στυλ μας:

div {
  border: 1.5px solid black;
  width: 200px;
}

Το πλάτος του μπλοκ (200 εικονοστοιχεία) θα παραμείνει το ίδιο ανεξάρτητα από το αν το μέγεθος της οθόνης αυξάνεται ή γίνεται μικρότερο. Αυτό το πλάτος δεν σχετίζεται με τίποτα στο έγγραφό μας HTML.

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

Σημασία της Responsive Τυπογραφίας στο Web Design

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

  • Βελτιωμένη εμπειρία χρήστη: Οι χρήστες του Ιστού ελκύονται από εφαρμογές που είναι εύκολο να πλοηγηθούν. Μια εφαρμογή που προσαρμόζεται σε διαφορετικά μεγέθη οθόνης και περιβάλλοντα προσφέρει μια απολαυστική και απρόσκοπτη εμπειρία χρήστη.
  • Διευκολύνει την προσαρμογή σε διαφορετικές θύρες προβολής: Η αποκριτική τυπογραφία ελέγχει τον διαθέσιμο χώρο σε μια θύρα προβολής και προσαρμόζεται ανάλογα. Έτσι, δεν θα έχετε περιπτώσεις υπερβολικά τεντωμένων κειμένων σε μεγάλες οθόνες ή μικροσκοπικών κειμένων σε μικρές οθόνες.
  • Βελτιωμένη αναγνωσιμότητα: Ένας καλός ιστότοπος πρέπει να έχει εύκολη πρόσβαση και ανάγνωση. Η επένδυση στην τυπογραφία με απόκριση διασφαλίζει ότι το κείμενο στην εφαρμογή σας προσαρμόζεται με βάση το μέγεθος και τον προσανατολισμό της οθόνης.
  • Συνεπής επωνυμία: Καθώς αυξάνεται ο πηγαίος κώδικας, ενδέχεται να έχετε μικτές παραλλαγές γραμματοσειράς στην εφαρμογή σας. Ο αποκριτικός σχεδιασμός διασφαλίζει ότι έχετε συνεπείς προσεγγίσεις σχεδίασης ανεξάρτητα από το μέγεθος της οθόνης ή τη συμπεριφορά του χρήστη.
  • Ενσωματώνεται με ερωτήματα πολυμέσων: Η αποκριτική τυπογραφία μπορεί να συνδυαστεί με ερωτήματα πολυμέσων. Οι σχεδιαστές ιστού μπορούν να σχεδιάσουν διαφορετικά στυλ μέσω ερωτημάτων μέσων όπου οι γραμματοσειρές προσαρμόζονται με βάση χαρακτηριστικά όπως ο προσανατολισμός και το μέγεθος της οθόνης.
  • Βελτιωμένη προσβασιμότητα: Η ανταποκρινόμενη τυπογραφία είναι ένα από τα θεμέλια της προσβασιμότητας μιας εφαρμογής. Ως εκ τούτου, οι χρήστες με διαφορετικές ικανότητες μπορούν να προσαρμόσουν τα μεγέθη της οθόνης και τις γραμματοσειρές ανάλογα με τις ανάγκες τους.
  30 εικόνες για μεγαλύτερη οθόνη

Πώς υπολογίζονται οι μονάδες REM

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

Τα περισσότερα προγράμματα περιήγησης έχουν οριστεί από προεπιλογή σε 16 px. Ωστόσο, μπορείτε να ορίσετε το μέγεθος της γραμματοσειράς της ρίζας σε έναν αριθμό όπως 10 εικονοστοιχεία. Μπορείτε να έχετε κάτι σαν αυτό:

html {
  font-size: 10px;
}

Σε μια τέτοια περίπτωση, 10px=1 REM

Μπορούμε να χρησιμοποιήσουμε αυτόν τον κώδικα για να δείξουμε:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Welcome to grtechpc.org</h1>
</body>
</html>

Αυτός ο κωδικός δεν έχει στυλ και έχει ένα μόνο στοιχείο, ένα H1, που λέει “Καλώς ήρθατε στο grtechpc.org”.

Το μέγεθος της γραμματοσειράς από προεπιλογή θα είναι 16 px, που σημαίνει ότι 1REM=16px. Όταν αποδίδουμε αυτήν τη σελίδα, έχουμε αυτό:

Μπορούμε τώρα να προσθέσουμε ένα φύλλο στυλ, styles.css και να δείξουμε πώς λειτουργεί το REM. Αυτός είναι ο τρόπος με τον οποίο συνδέετε αρχεία styles.css και index.html στην ενότητα του εγγράφου HTML:

   <link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">

Στη συνέχεια, μπορείτε να έχετε αυτόν τον κωδικό:

html {
  font-size: 10px;
}

Σε αυτήν την περίπτωση, όταν ορίζουμε αριθμούς REM, θα είναι σε σχέση με 10 px. Το μέγεθος γραμματοσειράς του H1 μας θα συρρικνωθεί επίσης, όπως φαίνεται σε αυτό το στιγμιότυπο οθόνης.

  Τι είναι το Edge Computing και γιατί έχει σημασία;

Μπορούμε τώρα να αλλάξουμε το μέγεθος του H1 μας χρησιμοποιώντας τις τιμές REM ως εξής:

h1 {
    font-size: 3.5rem; /* Equivalent to 35 pixels (3.5rem * 10px = 35px) */
  }

Το H1 μας τώρα θα είναι μεγαλύτερο στα 35px=3,5REM.

Οφέλη από τη χρήση του REM σε CSS

Οι περισσότεροι άνθρωποι έχουν συνηθίσει τα pixel (px) και τα ποσοστά ως μονάδες μέτρησης όταν γράφουν κώδικα CSS. Γιατί να μην επιμείνετε σε αυτές τις δύο επιλογές αντί να επιλέξετε μονάδες REM; Αυτοί είναι μερικοί λόγοι για να χρησιμοποιήσετε το REM:

  • Αυξάνει την επεκτασιμότητα: Μπορείτε να αλλάξετε το μέγεθος γραμματοσειράς του ριζικού στοιχείου, κάνοντας τις μονάδες REM επεκτάσιμες. Μια τέτοια προσέγγιση καθιστά εύκολη την αναλογική αλλαγή των μονάδων REM. Οι μονάδες REM θα προσαρμόζονται επίσης όταν οι χρήστες προσαρμόζουν τα μεγέθη γραμματοσειράς του προγράμματος περιήγησής τους.
  • Εύκολη διαχείριση: Μπορείτε να αλλάξετε το ριζικό στοιχείο στην ετικέτα ή και οι μονάδες REM θα προσαρμοστούν αυτόματα. Αυτή η προσέγγιση σάς γλιτώνει από τον πόνο της προσαρμογής κάθε στοιχείου στο αρχείο CSS σας. Έτσι, μπορείτε να αλλάξετε το μέγεθος της γραμματοσειράς, ας πούμε, όλων των H1 με μία μόνο αλλαγή.
  • Συνεπές μέγεθος: Οι μονάδες REM ελέγχουν τα μεγέθη γραμματοσειρών και την απόσταση. Έτσι, είστε βέβαιοι ότι θα έχετε σταθερά μεγέθη γραμματοσειράς στις ιστοσελίδες σας, καθώς είναι σχετικά με το ριζικό στοιχείο.
  • Καθιστά δυνατή την απόκριση σχεδίων: Μπορείτε να δημιουργήσετε σχέδια που προσαρμόζονται σε διάφορα μεγέθη οθόνης και συσκευές. Όταν χρησιμοποιούνται μονάδες REM μαζί με ερωτήματα πολυμέσων, μπορείτε να προσαρμόσετε τα μεγέθη γραμματοσειράς του ριζικού στοιχείου και άλλες μονάδες θα προσαρμοστούν αναλογικά.

CSS REM έναντι EM έναντι ποσοστών

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

REM εναντίον EM

Το REM και το EM είναι σχετικές μονάδες, που σημαίνει ότι αλλάζουν με βάση μια δεδομένη τιμή. Ωστόσο, το REM συνδέεται με το ριζικό στοιχείο (), ενώ το EM συνδέεται με το γονικό στοιχείο (κοντέινερ). Για παράδειγμα, έχετε ένα div που ενεργεί ως γονέας και ένα άλλο div μέσα στον γονέα που ενεργεί ως παιδί. Ρίξτε μια ματιά σε αυτόν τον κωδικό:

<div class="parent">
    <p>This is the parent element.</p>
    <div class="child">
      <p>This is the child element.</p>
    </div>
  </div>

Μπορείτε να ρυθμίσετε τις μονάδες EM ως εξής:

.parent {
  font-size: 1.5em; 
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
.child {
  font-size: 1.2em; 
  color: #333;
}

Έχουμε εκχωρήσει στην κλάση .parent μέγεθος γραμματοσειράς 1,5em. Ωστόσο, το στοιχείο .child έχει μέγεθος γραμματοσειράς 1,2em, το οποίο είναι σε σχέση με τη γονική κλάση. Όλες οι αλλαγές στη γονική κλάση θα μεταφερθούν αυτόματα στο θυγατρικό στοιχείο.

REM έναντι ποσοστών

Οι ποσοστιαίες μονάδες είναι σχετικές με το μέγεθος/ την απόσταση του γονικού στοιχείου. Έτσι, εάν έχουμε ένα γονικό στοιχείο, όπως το με μέγεθος γραμματοσειράς 16 εικονοστοιχεία, μπορούμε να ορίσουμε ένα θυγατρικό στοιχείο, όπως ένα

να έχει μέγεθος γραμματοσειράς 50%, που σημαίνει ότι είναι 50 /100*16=8px.

Μπορείτε να το επεξηγήσετε χρησιμοποιώντας αυτόν τον κώδικα:

body {
  font-size: 16px;
}
p {
  font-size: 50%;
}

Μπορούμε να συνοψίσουμε τη σχέση μεταξύ REM, EM και ποσοστών χρησιμοποιώντας αυτόν τον πίνακα:

FeatureREMEMPpercentageΣχετικό με το στοιχείο ρίζας Στοιχείο γονέα /κοντέινερΓονικό στοιχείο/ κοντέινερ ΚληρονομιάΑπό ρίζαΑπό γονέαΑπό γονέαΧρήση περίπτωσηςΚατάλληλο για συνεπείς διατάξειςΚατάλληλο για σχετικά μεγέθηΚατάλληλο για σχέδια με απόκρισηΚλιμακότητα Ναι Σχετική

Πότε δεν πρέπει να χρησιμοποιείτε μονάδες REM

Μπορεί να μπείτε στον πειρασμό να χρησιμοποιήσετε μονάδες REM σε όλες τις μετρήσεις σας CSS λόγω των πολλών πλεονεκτημάτων τους. Ωστόσο, αυτές είναι μερικές από τις περιπτώσεις όπου μπορεί να είναι ακατάλληλες:

  • Όταν ασχολείστε με εκτυπώσεις: Εάν θέλετε να εκτυπώσετε κάτι, τότε θέλετε να είστε σίγουροι ότι έχετε να κάνετε με απόλυτες τιμές. Σε τέτοιες περιπτώσεις, οι ίντσες ή τα χιλιοστά σάς δίνουν ακριβή έλεγχο των διαστάσεων.
  • Όταν θέλετε λεπτόκοκκο έλεγχο: Εάν θέλετε να ελέγξετε το μέγεθος ενός στοιχείου, το οποίο είναι στενά συνδεδεμένο με το γονικό, το REM δεν θα είναι καλή επιλογή. Σε τέτοιες περιπτώσεις, οι απόλυτες ή σταθερές μονάδες όπως τα pixel θα είναι μια τέλεια επιλογή.
  • Όταν ασχολείστε με κινούμενα σχέδια και μεταβάσεις: Οι μονάδες REM δεν είναι κατάλληλες όπου θέλετε το μέγεθος των κινούμενων εικόνων και των μεταβάσεων να αλλάζει σταδιακά. Όταν χρησιμοποιείτε μονάδες REM, μια συγκεκριμένη αλλαγή στο μέγεθος γραμματοσειράς του ριζικού στοιχείου θα προκαλέσει απότομες αλλαγές στις μεταβάσεις ή τις κινούμενες εικόνες.
  • Όταν ασχολείστε με προγράμματα περιήγησης παλαιού τύπου: Ορισμένα παλαιότερα προγράμματα περιήγησης δεν υποστηρίζουν μονάδες REM. Σε τέτοιες περιπτώσεις, μπορείτε να χρησιμοποιήσετε ποσοστά ή μονάδες που βασίζονται σε pixel.

συμπέρασμα

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

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

Ωστόσο, τέτοιες τιμές REM δεν ισχύουν σε όλες τις περιπτώσεις, καθώς υπάρχουν ορισμένες περιπτώσεις όπου τα ποσοστά και τα εικονοστοιχεία ταιριάζουν καλύτερα.

Μάθετε περισσότερα σχετικά με το στυλ χρησιμοποιώντας αυτούς τους πόρους CSS.

‘Ηταν αυτό το άρθρο χρήσιμο?

Ευχαριστούμε για την ανταπόκρισή σας!