Οδηγός για τις μονάδες προβολής CSS vw, vh, vmin, vmax

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

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

Ύψος προβολής (vh) και πλάτος προβολής (vw)

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

ο vw και vh μονάδες να αντιπροσωπεύει το ποσοστό του πλάτους και του ύψους του πραγματικού παραθύρου προβολής. Μπορούν να έχουν αξία μεταξύ 0 και 100 σύμφωνα με τους ακόλουθους κανόνες:

 100vw = 100% του πλάτους προβολής 1vw = 1% του πλάτους προβολής 100vh = 100% του ύψους του προβολέα 1vh = 1% του ύψους του προβολέα 

Διαφορές σε ποσοστιαίες μονάδες

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

Παράδειγμα: Ενότητες πλήρους οθόνης

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

ο Το HTML είναι αρκετά απλό. έχουμε μόλις τρία τμήματα το ένα κάτω από το άλλο και θέλουμε καθένα από αυτά να κάλυψη ολόκληρης της οθόνης (αλλά όχι περισσότερο).

Στο CSS, χρησιμοποιούμε 100vh σαν ύψος αξία και 100% όπως και πλάτος. Δεν χρησιμοποιούμε το vw μονάδα εδώ ως προεπιλογή, προστίθενται επίσης κύλινδροι κύλισης στο μέγεθος του παραθύρου προβολής. Έτσι, αν χρησιμοποιήσαμε το πλάτος: 100vw; κανόνας α οριζόντια γραμμή κύλισης θα εμφανιστεί στο στο κάτω μέρος του παραθύρου του προγράμματος περιήγησης.

 * περιθώριο: 0; padding: 0;  τμήμα background-size: cover; φόντο-θέση: κέντρο πλάτος: 100%. ύψος: 100vh;  .μήμα-1 φόντο-εικόνα: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg'); . τμήμα-2 φόντο-εικόνα: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .μέρος-3 φόντο-εικόνα: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Στο παρακάτω demo μπορείτε να το δείτε vh είναι πραγματικά μια μονάδα απόκρισης.

Σύμφωνα με τα έγγραφα του W3C, τα προαναφερθέντα οριζόντιο ζήτημα γραμμής κύλισης μπορεί να λυθεί προσθέτοντας το υπερχείλιση: αυτόματη; κανόνα στο στοιχείο ρίζας. Αυτή η λύση λειτουργεί μόνο εν μέρει, αν και. Η οριζόντια γραμμή κύλισης, πράγματι, εξαφανίζεται αλλά πλάτος είναι εξακολουθεί να υπολογίζεται με βάση το πλάτος της προβολής (συμπεριλαμβανομένης της πλαϊνής γραμμής), έτσι ώστε τα στοιχεία να είναι ελαφρώς μεγαλύτερα από αυτά που πρέπει να είναι.

Θα έλεγα, δεν θα τολμούσα να το χρησιμοποιήσω vw ενεργοποιήστε τη μονάδα μεγέθους στοιχείων πλήρους οθόνης λόγω αυτού του λόγου. Δεν το χρειαζόμαστε καν, όπως το πλάτος: 100%. ο κανόνας λειτουργεί τέλεια. Με τις διατάξεις πλήρους οθόνης, η πραγματική πρόκληση ήταν πάντα πώς ορίστε μια σωστή τιμή ύψους και το vh μονάδα δίνει μια λαμπρή λύση γι 'αυτό.

Άλλες περιπτώσεις χρήσης

Αν σας ενδιαφέρει άλλες περιπτώσεις χρήσης vw και vh Lullabot έχει ένα μεγάλο άρθρο που απαριθμεί ένα μερικά παραδείγματα πραγματικής ζωής (με demo του Codepen), όπως:

• Κάρτες σταθερής αναλογίας.
• Κρατώντας ένα στοιχείο μικρότερο από την οθόνη.
• Κλιμάκωση κειμένου.
• Ξεσπάει από το δοχείο.

Το Opera.dev έχει επίσης ένα σύντομο φροντιστήριο σχετικά με τον τρόπο με τον οποίο μπορείτε να αξιοποιήσετε τη δύναμη του vw μονάδα στο δημιουργώντας ανταποκρινόμενη τυπογραφία.

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

Μικρογραφία προβολής (vmin) και max viewport (vmax)

ο vmin και vmax μονάδες σας επιτρέπουν να έχετε πρόσβαση στο μέγεθος της μικρότερης ή της μεγαλύτερης πλευράς του παραθύρου προβολής, σύμφωνα με τους ακόλουθους κανόνες:

 100vmin = 100vw ή 100vh, όποιο είναι μικρότερο 1vmin = 1vw ή 1vh, όποιο είναι μικρότερο 100vmax = 100vw ή 100vh, όποιο είναι μεγαλύτερο 1vmax = 1vw ή 1vh, όποιο είναι μεγαλύτερο 

Έτσι, σε περίπτωση α πορτρέτο προσανατολισμό, 100vmin είναι ίσο με 100vw, όπως είναι το παράθυρο προβολής μικρότερη οριζόντια από κάθετη. Για τον ίδιο λόγο, 100vmax θα είναι ίσο με 100vh.

Ομοίως, στην περίπτωση α οριζόντιο προσανατολισμό, 100vmin είναι ίσο με 100vh, όπως είναι το παράθυρο προβολής μικρότερη κάθετα από οριζόντια. Και φυσικά, 100vmax θα είναι ίσο με 100vw εδώ.

Παράδειγμα: Κάνετε κείμενα ήρωας αναγνώσιμα σε κάθε οθόνη

ο vmin και vmax οι μονάδες είναι πολύ λιγότερο ευρέως γνωστές από αυτές vw και vh. Ωστόσο, μπορούν να χρησιμοποιηθούν άριστα ως α υποκατάστατο του προσανατολισμού @μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ερωτήματα. Για παράδειγμα, vmin και vmax μπορεί να έρθει σε πρακτικό όταν έχετε στοιχεία που μπορεί να φαίνονται περίεργα σε διαφορετικούς λόγους αναλογίας.

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

Εδώ είναι η κύρια ιδέα της λύσης τους:

 h1 μέγεθος γραμματοσειράς: 20vmin; γραμματοσειρά-οικογένεια: Avenir, sans-serif; γραμματοσειρά-βάρος: 900; κείμενο-ευθυγράμμιση: κέντρο;  

Στο demo του Codepen, μπορείτε να δείτε πώς vmin λύνει το πρόβλημα αναγνωσιμότητας κειμένων ήρωας. Αποκτήστε πρόσβαση στο “Πλήρης σελίδα” δείτε το Codepen, στη συνέχεια αλλαγή μεγέθους του παραθύρου του προγράμματος περιήγησης τόσο οριζόντια όσο και κάθετα για να δείτε πώς αλλάζει το κείμενο του ήρωα.

Υποστήριξη προγράμματος περιήγησης

Όπως μπορείτε να δείτε στο παρακάτω διάγραμμα CanIUse, η υποστήριξη του προγράμματος περιήγησης είναι σχετικά καλή για μονάδες προβολής. Ωστόσο, λάβετε υπόψη ότι ορισμένες εκδόσεις του IE και του Edge δεν υποστηρίζουν vmax. Επίσης, τα iOS 6 και 7 έχουν πρόβλημα με το vh μονάδα, η οποία καθορίστηκε στο iOS 8.