Πώς υπολογίζονται τα ποσοστά για τους υπολογισμούς πλάτους σε έναν υπεύθυνο ιστότοπο

Μάθετε πώς οι φυλλομετρητές ιστού καθορίζουν μια εμφάνιση χρησιμοποιώντας ποσοστιαίες τιμές

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

Χρησιμοποιώντας εικονοστοιχεία για τιμές πλάτους

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

Ο Ethan Marcotte επεξεργάστηκε τον όρο "ανταποκρινόμενος σχεδιασμός ιστού", εξηγώντας ότι η προσέγγιση αυτή περιλαμβάνει 3 βασικούς στόχους:

  1. Ένα πλέγμα υγρών
  2. Υγρό μέσο
  3. Τα ερωτήματα των μέσων μαζικής ενημέρωσης

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

Χρησιμοποιώντας ποσοστά τιμών πλάτους

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

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

Εάν μια εικόνα έχει εγγενή πλάτος 600 εικονοστοιχείων, τότε η χρήση τιμής CSS για την εμφάνισή της στο 50% δεν σημαίνει ότι θα έχει πλάτος 300 pixel στο πρόγραμμα περιήγησης ιστού. Αυτή η ποσοστιαία τιμή υπολογίζεται με βάση το στοιχείο που περιέχει αυτήν την εικόνα και όχι το εγγενές μέγεθος της ίδιας της εικόνας. Αν το δοχείο (το οποίο μπορεί να είναι τμήμα ή κάποιο άλλο στοιχείο HTML) έχει πλάτος 1000 pixel, τότε η εικόνα θα εμφανιστεί στα 500 pixels, αφού αυτή η τιμή είναι 50% του πλάτους του κοντέινερ. Εάν το στοιχείο που περιέχει είναι πλάτος 400 pixel, τότε η εικόνα θα εμφανιστεί μόνο σε 200 pixels, δεδομένου ότι η τιμή αυτή είναι 50% του δοχείου. Η εν λόγω εικόνα έχει μέγεθος 50% που εξαρτάται από το στοιχείο που την περιέχει.

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

Ποσοστά βάσει άλλων ποσοστών

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

Ακολουθεί ένα άλλο παράδειγμα που δείχνει αυτό στην πράξη.

Ας υποθέσουμε ότι έχετε έναν ιστότοπο όπου ολόκληρος ο ιστότοπος περιέχεται σε ένα τμήμα με μια κλάση "δοχείου" (κοινή πρακτική σχεδιασμού ιστοσελίδων). Μέσα σε αυτό το τμήμα υπάρχουν τρία άλλα τμήματα που τελικά θα στυλ να εμφανίζονται ως 3 κάθετες στήλες. Αυτό το HTML μπορεί να μοιάζει με αυτό:

Τώρα, μπορείτε να χρησιμοποιήσετε το CSS για να ορίσετε το μέγεθος αυτού του τμήματος "κοντέινερ" για να πείτε το 90%. Σε αυτό το παράδειγμα, το τμήμα δοχείου δεν έχει άλλο στοιχείο που το περιβάλλει εκτός από το σώμα, το οποίο δεν έχουμε καθορίσει σε καμία συγκεκριμένη τιμή. Από προεπιλογή, το σώμα θα εμφανιστεί ως το 100% του παραθύρου του προγράμματος περιήγησης. Επομένως, το ποσοστό του τμήματος "κοντέινερ" θα βασίζεται στο μέγεθος του παραθύρου του προγράμματος περιήγησης. Καθώς το παράθυρο του προγράμματος περιήγησης αλλάζει σε μέγεθος, θα το μέγεθος αυτού του "κοντέινερ". Έτσι, εάν το παράθυρο του προγράμματος περιήγησης είναι πλάτος 2000 pixel, αυτό το τμήμα θα εμφανιστεί στα 1800 pixels. Αυτό υπολογίζεται ως το 90% του 2000 (2000 x .90 = 1800)), το οποίο είναι το μέγεθος του προγράμματος περιήγησης.

Εάν κάθε ένα από τα τμήματα "col" που βρίσκονται μέσα στο "δοχείο" έχει οριστεί σε μέγεθος 30%, τότε κάθε ένα από αυτά θα έχει πλάτος 540 pixels σε αυτό το παράδειγμα. Αυτό υπολογίζεται ως το 30% των 1800 εικονοστοιχείων που το δοχείο αποδίδει σε (1800 x .30 = 540). Εάν αλλάξαμε το ποσοστό αυτού του κοντέινερ, αυτές οι εσωτερικές διαιρέσεις θα άλλαζαν επίσης στο μέγεθος που αποδίδουν, δεδομένου ότι εξαρτώνται από αυτό το στοιχείο που περιέχει.

Ας υποθέσουμε ότι τα παράθυρα του προγράμματος περιήγησης παραμένουν σε πλάτος 2000 εικονοστοιχείων, αλλα αλλάζουμε την ποσοστιαία τιμή του δοχείου σε 80% αντί για 90%. Αυτό σημαίνει ότι θα γίνει σε 1600 pixels ευρύ τώρα (2000 x .80 = 1600). Ακόμα κι αν δεν αλλάξουμε το CSS για το μέγεθος των 3 διαχωρισμών μας και αφήσουμε τους στο 30%, θα μεταβληθούν τώρα διαφορετικά, αφού το στοιχείο που τους περιέχει είναι το πλαίσιο στο οποίο έχουν ταξινομηθεί. Αυτά τα 3 τμήματα θα εκτείνονται πλέον ως 480 pixel το καθένα, το οποίο είναι 30% των 1600, ή το μέγεθος του δοχείου (1600 x .30 = 480).

Λαμβάνοντας αυτό ακόμη περισσότερο, αν υπήρχε μια εικόνα μέσα σε ένα από αυτά τα τμήματα "col" και η εικόνα αυτή είχε μέγεθος χρησιμοποιώντας ένα ποσοστό, το πλαίσιο για την ταξινόμησή του θα ήταν το ίδιο το "col". Καθώς αυτή η διαίρεση "col" άλλαξε σε μέγεθος, θα ήταν και η εικόνα μέσα σε αυτήν. Έτσι, αν το μέγεθος του προγράμματος περιήγησης ή του "δοχείου" άλλαξε, αυτό θα επηρέαζε τα τρία τμήματα "col", τα οποία με τη σειρά τους θα άλλαζαν το μέγεθος της εικόνας μέσα στο "col." Όπως μπορείτε να δείτε, όλα συνδέονται όταν πρόκειται για ποσοστιαίες τιμές μεγέθους.

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

Συνοψίζοντας

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