Πολλοί μαθητές σχεδιασμού ιστοσελίδων ανταποκρίνονται σε δύσκολο χρόνο χρησιμοποιώντας ποσοστά για τιμές πλάτους. Συγκεκριμένα, υπάρχει σύγχυση με τον τρόπο με τον οποίο το πρόγραμμα περιήγησης υπολογίζει αυτά τα ποσοστά. Παρακάτω θα βρείτε μια λεπτομερή εξήγηση για το πώς λειτουργούν τα ποσοστά για υπολογισμούς πλάτους σε έναν αποκριτικό ιστότοπο.
Χρήση εικονοστοιχείων για τιμές πλάτους
Όταν χρησιμοποιείτε εικονοστοιχεία ως τιμή πλάτους, τα αποτελέσματα είναι πολύ απλά. Εάν χρησιμοποιείτε CSS για να ορίσετε την τιμή πλάτους ενός στοιχείου στην κεφαλίδα ενός εγγράφου σε πλάτος 100 pixel, αυτό το στοιχείο θα είναι το ίδιο μέγεθος με αυτό που ορίσατε σε πλάτος 100 pixel στο περιεχόμενο του ιστότοπου ή στο υποσέλιδο ή σε άλλες περιοχές της σελίδας. Τα εικονοστοιχεία είναι μια απόλυτη τιμή, επομένως 100 εικονοστοιχεία είναι 100 εικονοστοιχεία ανεξάρτητα από το πού εμφανίζεται στο έγγραφό σας ένα στοιχείο. Δυστυχώς, ενώ οι τιμές των pixel είναι κατανοητές, δεν λειτουργούν καλά με ιστότοπους που ανταποκρίνονται.
Ο Ethan Marcotte επινόησε τον όρο «Ανταποκρινόμενος σχεδιασμός ιστοσελίδων», εξηγώντας αυτή την προσέγγιση που περιέχει 3 βασικές αρχές:
- Ένα ρευστό πλέγμα
- Ρευστά μέσα
- Ερωτήματα πολυμέσων
Αυτά τα δύο πρώτα σημεία, ένα ρευστό πλέγμα και ρευστό μέσο επιτυγχάνονται χρησιμοποιώντας ποσοστά, αντί για pixel, για τιμές μεγέθους.
Χρήση ποσοστών για τιμές πλάτους
Όταν χρησιμοποιείτε ποσοστά για να καθορίσετε ένα πλάτος για ένα στοιχείο, το πραγματικό μέγεθος που εμφανίζεται στο στοιχείο θα διαφέρει ανάλογα με το πού βρίσκεται στο έγγραφο. Τα ποσοστά είναι μια σχετική τιμή, που σημαίνει ότι το μέγεθος που εμφανίζεται σχετίζεται με άλλα στοιχεία του εγγράφου σας.
Για παράδειγμα, αν ορίσετε το πλάτος ενός εικόνα έως 50%, αυτό δεν σημαίνει ότι η εικόνα θα εμφανίζεται στο μισό του κανονικού της μεγέθους. Αυτή είναι μια κοινή παρανόηση.
Εάν μια εικόνα έχει πραγματικά πλάτος 600 εικονοστοιχεία, τότε η χρήση μιας τιμής CSS για την εμφάνισή της στο 50% δεν σημαίνει ότι θα έχει πλάτος 300 εικονοστοιχεία στο πρόγραμμα περιήγησης ιστού. Αυτή η ποσοστιαία τιμή υπολογίζεται με βάση το στοιχείο που περιέχει αυτήν την εικόνα και όχι το πραγματικό μέγεθος της ίδιας της εικόνας. Εάν το κοντέινερ (το οποίο θα μπορούσε να είναι διαίρεση ή κάποιο άλλο στοιχείο HTML) έχει πλάτος 1000 εικονοστοιχεία, τότε η εικόνα θα εμφανίζεται στα 500 εικονοστοιχεία, δεδομένου ότι η τιμή αυτή είναι 50% του πλάτους του κοντέινερ. Εάν το στοιχείο που περιέχει έχει πλάτος 400 εικονοστοιχεία, τότε η εικόνα θα εμφανίζεται μόνο στα 200 εικονοστοιχεία, καθώς αυτή η τιμή είναι 50% του κοντέινερ. Η εν λόγω εικόνα έχει μέγεθος 50% το οποίο εξαρτάται πλήρως από το στοιχείο που το περιέχει.
Θυμηθείτε, ο σχεδιασμός απόκρισης είναι ρευστός. Οι διατάξεις και τα μεγέθη θα αλλάξουν καθώς το το μέγεθος της οθόνης / αλλαγές συσκευής. Εάν το σκέφτεστε αυτό με φυσικούς όρους, εκτός διαδικτύου, είναι σαν να έχετε ένα κουτί από χαρτόνι που γεμίζετε με υλικό συσκευασίας. Εάν λέτε ότι το κουτί πρέπει να είναι μισό γεμάτο με αυτό το υλικό, το ποσό της συσκευασίας που χρειάζεστε θα ποικίλει ανάλογα με το μέγεθος του κουτιού. Το ίδιο ισχύει για τα ποσοστά πλάτους στο σχεδιασμό ιστοσελίδων.
Ποσοστά με βάση άλλα ποσοστά
Στο παράδειγμα εικόνας / κοντέινερ, χρησιμοποιήσαμε τιμές pixel για το στοιχείο που περιέχει για να δείξουμε πώς θα εμφανίζεται η αποκριτική εικόνα. Στην πραγματικότητα, το στοιχείο που περιέχει θα οριστεί επίσης ως ποσοστό και η εικόνα, ή άλλα στοιχεία, μέσα σε αυτό το κοντέινερ, θα πάρει τις τιμές τους με βάση ένα ποσοστό του ποσοστού.
Εδώ είναι ένα άλλο παράδειγμα.
Ας υποθέσουμε ότι έχετε έναν ιστότοπο όπου ολόκληρος ο ιστότοπος περιέχεται σε ένα τμήμα με μια κατηγορία «κοντέινερ» (μια κοινή πρακτική σχεδιασμού ιστοσελίδων). Μέσα σε αυτό το τμήμα υπάρχουν τρεις άλλες διαιρέσεις που τελικά θα εμφανίσετε στυλ ως 3 κάθετες στήλες.
Τώρα, μπορείτε να χρησιμοποιήσετε το CSS για να ορίσετε το μέγεθος αυτής της διαίρεσης "κοντέινερ" στο 90%. Σε αυτό το παράδειγμα, η διαίρεση εμπορευματοκιβωτίων δεν έχει άλλο στοιχείο που το περιβάλλει εκτός από το σώμα, το οποίο δεν έχουμε ορίσει σε καμία συγκεκριμένη τιμή. Από προεπιλογή, το σώμα θα αποδίδεται ως 100% του παραθύρου του προγράμματος περιήγησης. Επομένως, το ποσοστό του τμήματος "κοντέινερ" θα βασίζεται στο μέγεθος του παραθύρου του προγράμματος περιήγησης. Καθώς αυτό το παράθυρο του προγράμματος περιήγησης αλλάζει σε μέγεθος, έτσι και το μέγεθος αυτού του "κοντέινερ". Επομένως, εάν το παράθυρο του προγράμματος περιήγησης έχει πλάτος 2000 pixel, αυτή η διαίρεση θα εμφανίζεται στα 1800 pixel. Αυτό υπολογίζεται ως 90 τοις εκατό του 2000 (2000 x .90 = 1800)), το οποίο είναι το μέγεθος του προγράμματος περιήγησης.
Εάν κάθε ένα από τα τμήματα "col" που βρίσκονται στο "container" έχει μέγεθος 30%, τότε κάθε ένα από αυτά θα έχει πλάτος 540 pixels σε αυτό το παράδειγμα. Αυτό υπολογίζεται ως 30% των 1800 pixel που αποδίδει το κοντέινερ (1800 x 0,30 = 540). Εάν αλλάξαμε το ποσοστό αυτού του κοντέινερ, αυτές οι εσωτερικές διαιρέσεις θα άλλαζαν επίσης στο μέγεθος στο οποίο αποδίδουν, καθώς εξαρτώνται από αυτό το στοιχείο κοντέινερ.
Ας υποθέσουμε ότι τα παράθυρα του προγράμματος περιήγησης παραμένουν σε πλάτος 2000 pixel, αλλά αλλάζουμε την ποσοστιαία τιμή του κοντέινερ σε 80% αντί για 90%. Αυτό σημαίνει ότι θα αποδώσει στα 1600 pixel τώρα (2000 x .80 = 1600). Ακόμα κι αν δεν αλλάξουμε το CSS για το μέγεθος των τριών τμημάτων «col» μας και τα αφήσουμε στο 30%, θα αποδίδουν διαφορετικά τώρα, δεδομένου ότι το στοιχείο που περιέχει, το οποίο είναι το πλαίσιο από το οποίο έχουν μέγεθος, έχει άλλαξε. Αυτά τα 3 τμήματα θα αποδίδουν τώρα ως πλάτος 480 pixel το καθένα, το οποίο είναι 30% των 1600 ή το μέγεθος του δοχείου 1600 x 0,30 = 480).
Πηγαίνοντας αυτό ακόμη περισσότερο, εάν υπήρχε μια εικόνα σε ένα από αυτά τα τμήματα «col» και ότι η εικόνα είχε μέγεθος με βάση το ποσοστό, το πλαίσιο για το μέγεθός του θα ήταν το ίδιο το «col». Καθώς η διαίρεση «col» άλλαξε σε μέγεθος, έτσι και η εικόνα μέσα του. Επομένως, εάν το μέγεθος του προγράμματος περιήγησης ή του "κοντέινερ" άλλαξε, αυτό θα επηρέαζε τα τρία τμήματα "col", τα οποία, με τη σειρά τους, αλλάξτε το μέγεθος της εικόνας μέσα στο "col". Όπως μπορείτε να δείτε, όλα αυτά συνδέονται όταν πρόκειται για το μέγεθος βάσει ποσοστού αξίες.
Όταν εξετάζετε πώς θα αποδίδεται ένα στοιχείο μέσα σε μια ιστοσελίδα όταν χρησιμοποιείται μια ποσοστιαία τιμή για το πλάτος της, πρέπει να κατανοήσετε το πλαίσιο στο οποίο βρίσκεται αυτό το στοιχείο στη σήμανση της σελίδας.
Συνοψίζοντας
Τα ποσοστά διαδραματίζουν κρίσιμο ρόλο στη δημιουργία της διάταξης για αποκριτικούς ιστότοπους. Είτε θέλετε να αλλάξετε το μέγεθος των εικόνων είτε να χρησιμοποιήσετε ποσοστά πλάτους για να δημιουργήσετε ένα πραγματικά ρευστό πλέγμα του οποίου τα μεγέθη είναι σχετικές μεταξύ τους, η κατανόηση αυτών των υπολογισμών θα είναι απαραίτητη για να επιτευχθεί η εμφάνιση σας επιθυμία.