|
Στους περισσότερους εγχώριους σχεδιαστές αρέσει να χρησιμοποιούν px, ενώ στους περισσότερους ξένους ιστότοπους αρέσει να χρησιμοποιούν em και rem, οπότε ποια είναι η διαφορά μεταξύ των τριών και ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα του καθενός; Ας σας δώσουμε μια λεπτομερή εισαγωγή. Χαρακτηριστικά PX: 1. Ο IE δεν μπορεί να προσαρμόσει το μέγεθος γραμματοσειράς εκείνων που χρησιμοποιούν το px ως μονάδα. 2. Ο λόγος για τον οποίο οι περισσότεροι ξένοι ιστότοποι μπορούν να προσαρμοστούν είναι ότι χρησιμοποιούν em ή rem ως μονάδες γραμματοσειράς. 3. Ο Firefox μπορεί να προσαρμόσει τα px, em και rem, αλλά περισσότερο από το 96% των Κινέζων χρηστών του Διαδικτύου χρησιμοποιούν πρόγραμμα περιήγησης IE (ή πυρήνα). εικονοστοιχεία px. Μονάδες σχετικού μήκους. Το pixel px είναι σχετικό με την ανάλυση οθόνης της οθόνης. (Απόσπασμα από το εγχειρίδιο CSS2.0) Το em είναι μια σχετική μονάδα μήκους. Μέγεθος γραμματοσειράς σε σχέση με το κείμενο μέσα στο τρέχον αντικείμενο. Εάν το μέγεθος γραμματοσειράς του κειμένου στη γραμμή δεν έχει οριστεί τεχνητά, θα είναι σχετικό με το προεπιλεγμένο μέγεθος γραμματοσειράς του προγράμματος περιήγησης. (Απόσπασμα από το εγχειρίδιο CSS2.0) Το προεπιλεγμένο ύψος γραμματοσειράς για οποιοδήποτε πρόγραμμα περιήγησης είναι 16 εικονοστοιχεία. Όλα τα μη προσαρμοσμένα προγράμματα περιήγησης συμμορφώνονται: 1em=16px. Τότε 12px=0.75em, 10px=0.625em. Για να απλοποιήσετε τη μετατροπή μεγέθους γραμματοσειράς, πρέπει να δηλώσετε font-size=62.5% στον επιλογέα σώματος στο css, που κάνει την τιμή em 16px*62.5%=10px, έτσι ώστε 12px=1.2em, 10px=1em, που σημαίνει ότι χρειάζεται μόνο να διαιρέσετε την αρχική σας τιμή px με το 10 και, στη συνέχεια, να την αντικαταστήσετε με em ως μονάδα. Χαρακτηριστικά EM: 1. Η τιμή των em δεν είναι σταθερή. 2. Το EM κληρονομεί το μέγεθος γραμματοσειράς του γονικού στοιχείου. Έτσι, όταν γράφουμε CSS, πρέπει να προσέχουμε δύο πράγματα: 1. Δηλώστε μέγεθος γραμματοσειράς=62.5% στον επιλογέα σώματος. 2. Διαιρέστε την αρχική σας τιμή px με το 10 και αντικαταστήστε την με em ως μονάδα. 3. Υπολογίστε ξανά τις τιμές em αυτών των μεγεθυσμένων γραμματοσειρών. Αποφύγετε τις επαναλαμβανόμενες δηλώσεις μεγέθους γραμματοσειράς. Δηλαδή να αποφευχθεί το φαινόμενο 1,2 * 1,2 = 1,44. Για παράδειγμα, εάν δηλώσετε το μέγεθος γραμματοσειράς 1.2em στο #content, τότε όταν δηλώνετε το μέγεθος γραμματοσειράς του p, μπορεί να είναι μόνο 1em, όχι 1.2em, επειδή αυτό το em δεν είναι αυτό το em και γίνεται 1em=12px επειδή κληρονομεί το ύψος γραμματοσειράς του #content. Χαρακτηριστικά REM Το rem είναι μια νέα σχετική μονάδα (root em) που προστέθηκε στο CSS3, η οποία έχει προσελκύσει μεγάλη προσοχή. Ποια είναι η διαφορά μεταξύ αυτής της μονάδας και των em; Η διαφορά είναι ότι όταν χρησιμοποιείτε rem για να ορίσετε το μέγεθος γραμματοσειράς για ένα στοιχείο, εξακολουθεί να είναι το σχετικό μέγεθος, αλλά το σχετικό είναι μόνο το ριζικό στοιχείο HTML. Αυτή η μονάδα μπορεί να ειπωθεί ότι συνδυάζει τα πλεονεκτήματα του σχετικού μεγέθους και του απόλυτου μεγέθους, μέσω των οποίων μπορεί όχι μόνο να τροποποιήσει μόνο το ριζικό στοιχείο για να προσαρμόσει αναλογικά όλα τα μεγέθη γραμματοσειράς, αλλά και να αποφύγει την αλυσιδωτή αντίδραση της σύνθεσης μεγεθών γραμματοσειράς στρώμα προς στρώμα. Προς το παρόν, το rem υποστηρίζεται σε όλα τα προγράμματα περιήγησης εκτός από το IE8 και παλαιότερα. Για προγράμματα περιήγησης που δεν το υποστηρίζουν, η απάντηση είναι επίσης πολύ απλή, δηλαδή να γράψετε μια δήλωση απόλυτης μονάδας. Αυτά τα προγράμματα περιήγησης αγνοούν το μέγεθος γραμματοσειράς που έχει οριστεί με το rem. Εδώ είναι ένα παράδειγμα: p {μέγεθος γραμματοσειράς:14 εικονοστοιχεία; μέγεθος γραμματοσειράς:.875rem; } Σημείωση:Η επιλογή των μονάδων γραμματοσειράς εξαρτάται σε μεγάλο βαθμό από το έργο σας και εάν η βάση χρηστών σας χρησιμοποιεί την πιο πρόσφατη έκδοση του προγράμματος περιήγησης, τότε συνιστάται το REM, εάν η συμβατότητα είναι ανησυχητική, τότε χρησιμοποιήστε px ή και τα δύο. Ακολουθεί μια διεύθυνση εργαλείου μετατροπής μονάδας px, em, rem:http://pxtoem.com/
| 
Δημοσιεύτηκε στις 21/3/2017 9:31:50 π.μ.
|
|
|
