Ανέφερα νέες (σχετικά) μονάδες μέτρησης. Αυτές οι μονάδες είναι vw, vh, vmin και vmax και βασίζονται στο μέγεθος της θύρας προβολής του προγράμματος περιήγησης. Το πραγματικό τους μέγεθος αλλάζει καθώς αλλάζει η θύρα προβολής του προγράμματος περιήγησης, καθιστώντας αυτές τις μονάδες ιδανικές για προσαρμοστικός σχεδιασμός. Αν και στο δικό μου προηγούμενη ανάρτησηΥποστήριξα κατά της χρήσης αυτών των μονάδων για τον καθορισμό μεγεθών γραμματοσειράς, μπορεί να είναι πολύ χρήσιμες για την εργασία με στοιχεία διάταξης.

Μονάδες θυρών προβολής

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

Θα επικεντρωθώ στα δύο πρώτα, καθώς είναι τα πιο συχνά χρησιμοποιούμενα. Σε πολλές περιπτώσεις μονάδες θέασης(vh και vw) τέμνονται με τα ποσοστά ως προς τις δυνατότητες. Ωστόσο, το καθένα από αυτά έχει τα δικά του δυνατά και αδύνατα σημεία.

Συνοψίζοντας, μοιάζει με αυτό:

Όταν έχουμε να κάνουμε με πλάτος, το % είναι καλύτερο και όταν έχουμε να κάνουμε με το ύψος, το vh είναι καλύτερο.

Στοιχεία πλήρους πλάτους σελίδας: % > vw

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

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

Θύρα προβολής > html > σώμα

Έτσι, αν ορίσετε το πλάτος του στοιχείου σε 100vw, το στοιχείο θα επεκταθεί πέρα ​​από το html και το σώμα. V σε αυτό το παράδειγμαΈκανα ένα κόκκινο περίγραμμα γύρω από το στοιχείο html και γέμισα τις ενότητες με διαφορετικά χρώματα.

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

Στοιχεία ύψους πλήρους σελίδας: vh > %

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

Η χρήση του vh για να επιτευχθεί αυτό το αποτέλεσμα είναι αρκετά απλή:

Παράδειγμα ( ύψος: 100vh; )

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

Ακολουθούν μερικά παραδείγματα για το πώς μπορούν να χρησιμοποιηθούν οι μονάδες vh.

Εικόνες φόντου πλήρους οθόνης

Μια τυπική χρήση της μονάδας vh είναι η δημιουργία μιας εικόνας φόντου που εκτείνεται σε όλο το ύψος και το πλάτος της οθόνης, ανεξάρτητα από το μέγεθος της συσκευής. Αυτό είναι αρκετά εύκολο να γίνει.

Bg (θέση: σχετική; φόντο: url("bg.jpg") κέντρο/εξώφυλλο; πλάτος: 100%; ύψος: 100vh; )

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

Τομή (πλάτος: 100%; ύψος: 100vh; )

Μπορούμε να χρησιμοποιήσουμε JavaScript για να δημιουργήσουμε την ψευδαίσθηση της περιστροφής σελίδας.

$("nav").on("κλικ", function() ( if ($(this).hasClass("down")) ( var movePos = $(window).scrollTop() + $(window).height () if ($(this).hasClass("επάνω")) ( var movePos = $(window).scrollTop() - $(window).height(); animate(( scrollTop: movePos ), 1000 ))

Αναδιπλούμενη εικόνα

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

Θα χρειαστούμε τον παρακάτω κωδικό

Img ( πλάτος: αυτόματο; /* Το αυτόματο πλάτος να είναι ανάλογο με το ύψος */ μέγιστο πλάτος: 100%; /* Όχι περισσότερο πλάτοςγονικό στοιχείο */ μέγιστο ύψος: 90vh; /* Χωρίς υπέρβαση του ύψους της θύρας προβολής */ margin: 2rem auto; )

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

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

Δείτε πώς να τα λύσετε.

Για να ορίσετε διαστάσεις διάφορα στοιχείαΤο CSS χρησιμοποιεί απόλυτες και σχετικές μονάδες μέτρησης. Οι απόλυτες μονάδες είναι ανεξάρτητες από τη συσκευή εξόδου, αλλά οι σχετικές μονάδες καθορίζουν το μέγεθος ενός στοιχείου σε σχέση με την τιμή ενός άλλου μεγέθους.

Σχετικές μονάδες

Οι σχετικές μονάδες χρησιμοποιούνται συνήθως για την εργασία με κείμενο. Στον πίνακα 1 παραθέτει τις κύριες σχετικές μονάδες.

Η μονάδα em είναι μια μεταβλητή τιμή που εξαρτάται από το μέγεθος γραμματοσειράς του τρέχοντος στοιχείου (το μέγεθος ορίζεται μέσω της ιδιότητας στυλ γραμματοσειράς). Κάθε πρόγραμμα περιήγησης έχει ένα ενσωματωμένο μέγεθος κειμένου που χρησιμοποιείται όταν αυτό το μέγεθος δεν καθορίζεται ρητά. Επομένως, αρχικά το 1em ισούται με το προεπιλεγμένο μέγεθος γραμματοσειράς του προγράμματος περιήγησης ή το μέγεθος γραμματοσειράς του γονικού στοιχείου. Ο συμβολισμός ποσοστού είναι πανομοιότυπος με τον em , καθώς οι τιμές του 1em και του 100% είναι ίσες.

Η μονάδα ex ορίζεται ως το ύψος του πεζού χαρακτήρα "x". Το ex υπόκειται στους ίδιους κανόνες με το em , δηλαδή ότι δεσμεύεται στο προεπιλεγμένο μέγεθος γραμματοσειράς του προγράμματος περιήγησης ή στο μέγεθος γραμματοσειράς του γονικού του στοιχείου.

Η μονάδα ch είναι ίση με το πλάτος του χαρακτήρα "0" για το τρέχον στοιχείο και, όπως και em, εξαρτάται από το μέγεθος της γραμματοσειράς.

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

Υπάρχει επίσης μια ομάδα σχετικών μονάδων που συνδέονται με το μέγεθος της θύρας προβολής του προγράμματος περιήγησης. Στον πίνακα 2 δείχνει μια λίστα με μια περιγραφή.

Απόλυτες μονάδες

Απόλυτες μονάδες είναι φυσικές διαστάσεις- ίντσες, εκατοστά, χιλιοστά, σημεία, picas και pixel. Για συσκευές με χαμηλά dpi (ο αριθμός των εικονοστοιχείων ανά ίντσα καθορίζει την πυκνότητα των εικονοστοιχείων), η σύνδεση είναι ανά εικονοστοιχείο. Σε αυτήν την περίπτωση, μια ίντσα ισούται με 96 pixel. Προφανώς, η πραγματική ίντσα δεν θα ταιριάζει με την ίντσα σε μια τέτοια συσκευή. Σε συσκευές με υψηλό DPI, η πραγματική ίντσα είναι ίδια με την ίντσα στην οθόνη, επομένως το μέγεθος των εικονοστοιχείων υπολογίζεται ως 1/96 της ίντσας. Στον πίνακα 3 παραθέτει τις βασικές απόλυτες μονάδες.

Παράδειγμα

Κεφαλίδα 30 εικονοστοιχείων

Μέγεθος κειμένου 1,5 εμ

Επικεφαλίδα 24 σημείων

Μετατόπιση κειμένου προς τα δεξιά κατά 30 χιλιοστά

Σημείωμα

Όταν ορίζετε διαστάσεις, φροντίστε να καθορίσετε τις μονάδες μέτρησης, για παράδειγμα πλάτος: 30 εικονοστοιχεία. Διαφορετικά, το πρόγραμμα περιήγησης δεν θα είναι σε θέση να εμφανίσει το επιθυμητό αποτέλεσμα επειδή δεν καταλαβαίνει τι μέγεθος χρειάζεστε. Οι μονάδες δεν προστίθενται μόνο όταν η τιμή είναι μηδέν (περιθώριο: 0).

Ο Internet Explorer υποστηρίζει τη μονάδα vm αντί για vmin.

Προσδιορισμός

Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.

• Σύσταση - Η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
• Σύσταση υποψηφίου ( Πιθανή σύσταση ) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτεί βοήθεια από την κοινότητα ανάπτυξης για την εφαρμογή του προτύπου.
• Προτεινόμενη σύσταση Προτεινόμενη σύσταση) - σε αυτό το στάδιο το έγγραφο υποβάλλεται στο Γνωμοδοτικό Συμβούλιο του W3C για τελική έγκριση.
• Εργαζόμενο προσχέδιο - Μια πιο ώριμη έκδοση ενός προσχεδίου που έχει συζητηθεί και τροποποιηθεί για έλεγχο από την κοινότητα.
• προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) - μια πρόχειρη έκδοση του προτύπου μετά από αλλαγές που έγιναν από τους συντάκτες του έργου.
• προσχέδιο ( Σχέδιο προδιαγραφών) - η πρώτη πρόχειρη έκδοση του προτύπου.

×

: vw, vh και vmin. Πρόσφατα, η έκδοση προγραμματισμού του Chrome (αριθμός 20) τα υποστηρίζει επίσης και αυτό δίνει κάποια ελπίδα ότι οι προγραμματιστές άλλων προγραμμάτων περιήγησης θα ακολουθήσουν αυτό το παράδειγμα. Στην πραγματικότητα, αυτό θα ήταν χρήσιμο, γιατί είναι πολύ βολικό και πρακτικό, και θα προσπαθήσω να σας πω γιατί συμβαίνει αυτό.

Γιατί είναι ωραίο αυτό;

Πολλοί λόγοι. Εδώ είναι δύο από αυτά:

1. Υπάρχει ένα τέτοιο πράγμα όπως το μήκος μιας γραμμής κειμένου στην οποία η ανάγνωση είναι άνετη. Δεν θέλω να ξεκινήσω ένα holiwar, αλλά ας πούμε ότι είναι 80 χαρακτήρες. Έτσι, αυτές οι μονάδες μέτρησης σας επιτρέπουν να διατηρήσετε αυτήν την τιμή σε οποιοδήποτε μέγεθος οθόνης
2. Μπορούν επίσης να προσαρμόσουν τη σχέση του τίτλου με το κυρίως κείμενο, όπως, για παράδειγμα, σε μια από τις αναρτήσεις του Trent Walton (Αγγλικά)

Πώς λειτουργεί;

Η μονάδα καθεμιάς από αυτές τις τρεις τιμές είναι το 1% του μεγέθους της οθόνης. Για παράδειγμα, εάν το μέγεθος της οθόνης είναι 40 εκατοστά σε πλάτος, τότε το 1vw είναι ίσο με 0,4 cm.

1vw= 1% πλάτος παραθύρου
1vh= 1% ύψος παραθύρου
1vmin= 1vw ή 1vh, όποιο είναι λιγότερο

Χρήση

Α, είναι πολύ απλό:

H1 (μέγεθος γραμματοσειράς: 5,9vw; ) h2 (μέγεθος γραμματοσειράς: 3,0vh; ) p (μέγεθος γραμματοσειράς: 2vmin; )

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

Chrome 20+Και IE 10+
Έκανα check in Opera Next (12), Safari 5.2 και Firefox Beta (13) - χωρίς αποτέλεσμα.

Διαδήλωση

Ένα σύντομο βίντεο που δείχνει τη χρήση του vw:

Μπορείτε να το δοκιμάσετε μόνοι σας (βεβαιωθείτε ότι το πρόγραμμα περιήγησής σας υποστηρίζει αυτές τις μονάδες μέτρησης)

Σφάλματα

Υπάρχει υποστήριξη στο Chrome 20, αλλά είναι λίγο μονόπλευρη. Όταν αλλάζει το μέγεθος του παραθύρου του προγράμματος περιήγησης, η γραμματοσειρά δεν προσαρμόζεται ώστε να ταιριάζει στο νέο μέγεθος παραθύρου. Η προδιαγραφή λέει:

Εάν το ύψος ή το πλάτος του παραθύρου αλλάζει, κλιμακώνονται ανάλογα

Υπέβαλα ένα αίτημα στον εντοπισμό σφαλμάτων. Ίσως αυτό να μην είναι μεγάλο πρόβλημα, η γραμματοσειρά εξακολουθεί να αλλάζει σε μια "καθαρή" φόρτωση σελίδας. Τέτοια μικρά πράγματα είναι ενδιαφέροντα μόνο για εμάς, σχεδιαστές geek που αντιμετωπίζουν τέτοια πράγματα προσεκτικά, αλλά ακόμα.

Για να διορθώσετε αυτό το πρόβλημα (να επιτρέπεται η αλλαγή μεγέθους χωρίς επαναφόρτωση της σελίδας), πρέπει να αναγκάσετε το στοιχείο να επανασχεδιαστεί. χρησιμοποίησα jQueryκαι απλώς πειραματίστηκε με τις τιμές z-index κάθε στοιχείου που προκαλεί την επανασχεδίαση.

CauseRepaintsOn = $("h1, h2, h3, p"); $(window).resize(function() ( causeRepaintsOn.css("z-index", 1); ));

Όχι μόνο στο μέγεθος της γραμματοσειράς

Παρεμπιπτόντως, αυτά είναι μόνο μερικά. Όπως em , px , οτιδήποτε. Μπορείτε να τα χρησιμοποιήσετε παντού, δεν περιορίζεται μόνο από το μέγεθος της γραμματοσειράς.

Χρησιμοποιήστε το!

Εγγενής χρήση

Μην ξεχάσετε να αφήσετε μια επανάκληση για τα προγράμματα περιήγησης που δεν υποστηρίζουν ακόμη αυτές τις μονάδες:

H1 (μέγεθος γραμματοσειράς: 36 px, μέγεθος γραμματοσειράς: 5,4 vw; )

Έλεγχος υποστήριξης

Το Modernizr δεν έχει ακόμη δοκιμή για αυτόν τον έλεγχο, αλλά μπορείτε να το ελέγξετε μόνοι σας χρησιμοποιώντας ένα μικρό σενάριο JS.

Var testEl = $("#vw-test"); var viewport = $(παράθυρο); testEl.css(( πλάτος: "100vw" )); if (testEl.width() == viewport.width()) ( $("html").addClass("vw-support"); ) else ($("html").append("vw-unsupported") ;

Μίμηση λειτουργικότητας με το FitText.js

Αυτή η ιδέα είναι ότι συσχετίζει το συνολικό πλάτος της κεφαλίδας με το πλάτος του γονικού στοιχείου, κάτι που κάνει το FitText.js. Είναι αλήθεια ότι το κάνει αυτό μέσω Javascript, μαθηματικών, ετικετών span και ένα σωρό άλλα πράγματα. Θεωρητικά, θα μπορούσατε να εκτελέσετε έναν έλεγχο και να χρησιμοποιήσετε το Modernizr.load για να φορτώσετε το FitText.js εάν δεν βρεθεί υποστήριξη.

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

Μονάδες μέτρησης και η σημασία τους

Υπάρχουν 4 τύποι μονάδων θυρών προβολής στο CSS: vh, vw, vmin και vmax.

Ύψος θύρας προβολής (vh) – με βάση το ύψος της θύρας προβολής. Η τιμή 1vh είναι ίση με το 1% του ύψους της θύρας προβολής.

Πλάτος θύρας προβολής (vw) – με βάση το πλάτος της θύρας προβολής. Η τιμή 1vw ισούται με το 1% του πλάτους της θύρας προβολής.

Ελάχιστη θύρα προβολής (vmin) – με βάση την ελάχιστη πλευρά της θύρας προβολής. Εάν το ύψος της θύρας προβολής είναι μικρότερο από το πλάτος, η τιμή του 1vmin θα είναι ίση με το 1% του ύψους. Ομοίως, εάν το πλάτος είναι μικρότερο από το ύψος, τότε το 1vmin θα είναι ίσο με το 1% του πλάτους της θύρας προβολής.

Μέγιστη θύρα προβολής (vmax) – με βάση τη μεγάλη πλευρά της θύρας προβολής. Εάν το ύψος της θύρας προβολής είναι μεγαλύτερο από το πλάτος, τότε η τιμή του 1vmax θα είναι ίση με το 1% του ύψους της θύρας προβολής. Εάν το πλάτος της θύρας προβολής είναι μεγαλύτερο από το ύψος, τότε το 1vmax θα είναι ίσο με το 1% του πλάτους.

Ας δούμε σε ποιες αξίες έχουμε διαφορετικές καταστάσεις:

Εάν η θύρα προβολής έχει πλάτος 1200 εικονοστοιχεία και ύψος 1000 εικονοστοιχεία, τότε η τιμή των 10 vw θα είναι 120 εικονοστοιχεία και η τιμή των 10 vh θα είναι 100 εικονοστοιχεία. Το πλάτος της θύρας προβολής είναι μεγαλύτερο από το ύψος, επομένως το 10vmax θα είναι ίσο με 120px και το 10vmin θα είναι 100px.

Εάν περιστρέψετε τη συσκευή έτσι ώστε το πλάτος να γίνει 1000px και το ύψος 1200px, τότε τα 10vh γίνονται 120px και τα 10vw γίνονται 100px. Είναι ενδιαφέρον ότι το 10vmax θα παραμείνει 120 px, επειδή τώρα η τιμή καθορίζεται από το ύψος της θύρας προβολής. Η τιμή των 10vmin θα παραμείνει επίσης 100px.

Εάν συρρικνώσετε το παράθυρο του προγράμματος περιήγησης σε πλάτος 1000 εικονοστοιχείων και ύψος 800 εικονοστοιχεία, τότε τα 10 vh θα είναι 80 εικονοστοιχεία και τα 10 vw θα είναι 100 εικονοστοιχεία. Ομοίως, το 10vmax θα γίνει 100px και το 10vmin θα γίνει 80px.

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

Στο demo μπορείτε να δείτε πώς το πλάτος του πρώτου παιδί στοιχείοκαταλαμβάνει το 80% του πλάτους του γονέα. Το δεύτερο παιδί έχει πλάτος 80vw, καθιστώντας το πιο φαρδύ από το μητρικό του.

Εφαρμογή μονάδων θυρών προβολής

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

Εικόνες και ενότητες φόντου πλήρους οθόνης

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

Ας δούμε το επόμενο Παράδειγμα HTML: