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

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

ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

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

Απόλυτα Μήκη

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

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

Μονάδα	Περιγραφή
εκ	εκατοστά
mm	χιλιοστά
σε	ίντσες (1in = 96px = 2,54cm)
px *	pixel (1px = 1/96ο του 1in)
pt	πόντοι (1 πόντος = 1/72 από 1 ίντσες)
pc	μπαστούνια (1pc = 12pt)

Σχετικά μήκη

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

Μονάδα	Σχετικό με
σε*	Σε σχέση με το μέγεθος γραμματοσειράς του στοιχείου (2em σημαίνει 2 φορές το μέγεθος της τρέχουσας γραμματοσειράς)
πρώην	Σε σχέση με το ύψος x της τρέχουσας γραμματοσειράς (που χρησιμοποιείται σπάνια)
κεφ	Σε σχέση με το πλάτος του '0' (μηδέν)
rem*	Σε σχέση με το μέγεθος γραμματοσειράς του ριζικού στοιχείου
vw	Σχετικά με το 1% του πλάτους της θύρας προβολής*
vh	Σχετικά με το 1% του ύψους της θύρας προβολής*
ελάχ	Σχετικά με το 1% της μικρότερης διάστασης της θύρας προβολής
vmax	Σχετικά με το 1% της μεγαλύτερης διάστασης της θύρας προβολής
%	Σε σχέση με το γονικό στοιχείο

1. Px (Pixel)

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

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

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

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

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

<div class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         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 debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div>

.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

παραγωγή

Windows 10 μη διορθώσιμη διόρθωση έντασης εκκίνησης

web-content-sized-in-pixel-css-unit-of-measurement

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

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

2. Εγώ (Μ)

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

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

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

   <div class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div>

.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

παραγωγή

περιεχόμενο ιστού με μέγεθος σε μονάδα μέτρησης em css

Μπορείτε να δείτε πώς το 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="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div>

.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
}

παραγωγή

cpu που τρέχει σε 100 windows 10

περιεχόμενο ιστού με μέγεθος σε μονάδα μέτρησης rem css

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

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

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