Px vs. Em vs. Rem: Ποια μονάδα CSS πρέπει να χρησιμοποιήσετε;

Θα μάθετε μερικές μονάδες CSS για την προσαρμογή του μεγέθους γραμματοσειράς του κειμένου κατά τη δημιουργία ιστοσελίδων. Υπάρχουν πολλές μονάδες όπως pt, pc, ex, κ.λπ., αλλά στις περισσότερες περιπτώσεις θα πρέπει να εστιάσετε στις τρεις πιο δημοφιλείς μονάδες: px, em και rem. Πολλοί προγραμματιστές συνήθως δεν καταλαβαίνουν ποιες είναι οι διαφορές μεταξύ αυτών των μονάδων. Έτσι, παρακάτω είναι μια λεπτομερής εξήγηση αυτών των μονάδων.

Πριν προχωρήσετε, σημειώστε ότι υπάρχουν δύο τύποι μηκών μονάδων: απόλυτος και συγγενής.

Απόλυτα Μήκη

Οι μονάδες απόλυτου μήκους είναι σταθερές και ένα μήκος που εκφράζεται σε οποιοδήποτε από αυτά θα εμφανίζεται ακριβώς με αυτό το μέγεθος.

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

Σχετικά μήκη

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

1. Px (Pixel)

Το Pixel είναι ίσως η πιο χρησιμοποιούμενη μονάδα στο CSS και είναι πολύ δημοφιλή όταν πρόκειται για τον ορισμό του μεγέθους γραμματοσειράς του κειμένου σε ιστοσελίδες. Ένα pixel (1px) ορίζεται ως το 1/96ο της ίντσας στα μέσα εκτύπωσης.

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

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

Εκεί εμφανίζεται η αναλογία pixel της συσκευής. Ουσιαστικά είναι απλώς ένας τρόπος για να υπολογίσετε πόσο χώρο θα καταλάβει ένα εικονοστοιχείο CSS (1 εικονοστοιχεία) στην οθόνη της συσκευής που θα της επιτρέψει να φαίνεται το ίδιο μέγεθος σε σύγκριση με άλλη συσκευή.

Παρακάτω είναι ένα παράδειγμα: -

<div class="δοχείο">
<div>
<h1>Αυτή είναι μια παράγραφος</h1>
<Π>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis at! Officiis praesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
 sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure impedit assumenda distinctio aliquid debititis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</Π>
</div>
</div>

.δοχείο {
 πλάτος: 100%;
 Ύψος: 100vh;
 οθόνη: flex;
 justify-content: κέντρο;
 στοίχιση-στοιχεία: κέντρο;
}
.δοχείοdiv {
 μέγιστο πλάτος: 500 px;
 padding: 5px 20px;
 περίγραμμα: 1px γκρι στερεό.
 περίγραμμα-ακτίνα: 10px;
}
Π {
 μέγεθος γραμματοσειράς: 16 px;
}

παραγωγή

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

Παρατηρήστε πώς το κείμενο και στα δύο πλαίσια έχει το ίδιο μέγεθος. Βασικά έτσι λειτουργεί το pixel. Βοηθά το περιεχόμενο ιστού (όχι μόνο το κείμενο) να έχει το ίδιο μέγεθος σε όλες τις συσκευές.

2. Em (M)

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

Ας υποθέσουμε ότι έχετε ένα γονικό div που έχει μέγεθος γραμματοσειράς 16 px. Εάν δημιουργήσετε ένα στοιχείο παραγράφου σε αυτό το div και του δώσετε μέγεθος γραμματοσειράς 1em, το μέγεθος γραμματοσειράς της παραγράφου θα είναι 16 px.

Ωστόσο, αν δώσετε σε άλλη παράγραφο το μέγεθος γραμματοσειράς 2em που θα μεταφραστεί σε 32px. Εξετάστε το παρακάτω παράδειγμα:

<div class="div-one">
<p class="ένα-εμ">1 em με βάση 10 εικονοστοιχεία</Π>
<p class="δύο τους">2 em βασισμένα σε 10 εικονοστοιχεία</Π>
</div>
<div class="div-δύο">
<p class="ένα-εμ">1 em με βάση 10 εικονοστοιχεία</Π>
<p class="δύο τους">2 em βασισμένα σε 10 εικονοστοιχεία</Π>
</div>
</div>

.div-one {
 μέγεθος γραμματοσειράς: 15 px;
}
.div-δύο {
 μέγεθος γραμματοσειράς: 20 px;
}
.one-em {
 μέγεθος γραμματοσειράς: 1em;
}
.δυο-εμ {
 μέγεθος γραμματοσειράς: 2em;
}

παραγωγή

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

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

3. Rem (Root Em)

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

Το προεπιλεγμένο μέγεθος γραμματοσειράς ενός προγράμματος περιήγησης ιστού είναι συνήθως 16 px, επομένως το 1rem θα είναι 16 px και το 2rem θα είναι 32 px. Ωστόσο, σε περίπτωση που το μέγεθος της γραμματοσειράς του root αλλάζει σε 10 px, για παράδειγμα. Το 1rem θα είναι 10px και το 2rem θα είναι 20px.

Ακολουθεί ένα παράδειγμα για να γίνουν τα πράγματα πιο ξεκάθαρα:

<div class="div-one">
<!-- EM -->
<p class="ένα-εμ">1 em με βάση το δοχείο (40 εικονοστοιχεία)</Π>
<p class="δύο τους">2 em με βάση το κοντέινερ (40 εικονοστοιχεία)</Π>
<!-- REM -->
<p class="ένα-ρεμ">1 rem με βάση τη ρίζα (16 εικονοστοιχεία)</Π>
<p class="δύο ρεμβ">2 rem με βάση τη ρίζα (16 εικονοστοιχεία)</Π>
</div>

.div-one {
 μέγεθος γραμματοσειράς: 40 px;
}
.one-em {
 μέγεθος γραμματοσειράς: 1em;
}
.δυο-εμ {
 μέγεθος γραμματοσειράς: 2em;
}
.one-rem {
 μέγεθος γραμματοσειράς: 1rem;
}
.δύο ρεμβ {
 μέγεθος γραμματοσειράς: 2rem;
}

παραγωγή

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

Px vs. Em vs. Rem: Ποια μονάδα είναι η καλύτερη;

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