Πριν υλοποιήσετε μια διάταξη πρακτικά, υπάρχουν κάποια βασικά πράγματα που πρέπει να εξετάσετε. Πρώτα απ 'όλα, πρέπει να αποφασίσετε για τον τύπο της διάταξης. Καταρχήν, υπάρχουν τρεις επιλογές.
• Σταθερή
• Ευέλικτη
• Ελαστική
Το CSS επιτρέπει διατάξεις με σταθερές ή ευέλικτες διαστάσεις. Στις σταθερές διατάξεις συνήθως χρησιμοποιούνται μονάδες σε pixels. Αντίθετα, οι ευέλικτες διατάξεις βασίζονται σε ποσοστιαίες τιμές. Και οι δύο εκδόσεις διατάξεων έχουν τα πλεονεκτήματα και τα μειονεκτήματά τους.
Συνήθως χρησιμοποιούνται σταθερές διατάξεις όταν πρέπει να χρησιμοποιηθούν γραφικά για τη δημιουργία της διάταξης. (Ενώ υπάρχουν εξαιρέσεις εδώ και με τη χρήση CSS φόντων). Όταν η ακριβής θέση των στοιχείων είναι σημαντική στις διατάξεις, συνήθως χρησιμοποιείται επίσης σταθερή θέση. Σε αυτόν τον τύπο διάταξης, συνήθως τουλάχιστον ο πλάτος της διάταξης καθορίζεται σε μια σταθερή αριθμητική τιμή σε pixels. Αυτό το πλάτος σχεδιάζεται συνήθως για συγκεκριμένες αναλύσεις οθόνης.
Η κατάσταση είναι διαφορετική με τις ευέλικτες διατάξεις. Εδώ δεν δίνεται σταθερό πλάτος. Η διάταξη εκείνη προσαρμόζεται στο πλάτος του παράθυρου περιήγησης.
Σε αυτές τις διατάξεις, για παράδειγμα, το πλάτος δίνεται σε ποσοστιαίες τιμές. Όταν ένας χρήστης προσαρμόζει το μέγεθος του παραθύρου περιήγησης, αλλάζει και το μέγεθος της διάταξης.
Χάρη στις σύγχρονες ιδιότητες CSS υπάρχει επίσης μια άλλη διάταξη, το τακτικό λογικά Layout. Εδώ η διάταξη προσαρμόζεται έτσι, ώστε να φαίνεται πλήρως διαφορετική σε μια smartphones συγκριτικά με έναν επιτραπέζιο υπολογιστή. Για παράδειγμα, εδώ, στο PSD-Tutorials.de, χρησιμοποιείται μια τέτοια διάταξη. Όταν ανοίγετε τη σελίδα σε έναν επιτραπέζιο υπολογιστή με μέγεθος φυσιολογικού παραθύρου περιήγησης, έχετε την ακόλουθη εικόνα.
Αλλάζοντας το παράθυρο, η διάταξη των στοιχείων στην ιστοσελίδα πραγματικά αλλάζει.
Η προσπάθεια για τη δημιουργία μιας ανταποκριτικής διάταξης είναι συγκριτικά υψηλή. Τελικά, πρέπει να προσδιοριστεί το μέγεθος της οθόνης του επισκέπτη και στη συνέχεια να του παρουσιαστεί μια κατάλληλη διάταξη. Και αυτή η κατάλληλη διάταξη πρέπει πράγματι να αναπτυχθεί για τις διαφορετικές αναλύσεις οθόνης. Έτσι, ένας επισκέπτης που ανοίγει την ιστοσελίδα σας με μια μεγάλη οθόνη, προβάλλεται για παράδειγμα με μια τρικολόνη διάταξη. Αντίθετα, ένας άλλος επισκέπτης που ανοίγει την ιστοσελίδα σας με ένα smartphones προβάλλεται μια μονόκολο διάταξη.
Πλεονεκτήματα και μειονεκτήματα των εκδοχών
Πριν υλοποιήσετε μια διάταξη, πρέπει να σκεφτείτε ποια από τις προαναφερθείσες μορφές διατάξεων θέλετε να χρησιμοποιήσετε. Θα ήθελα να σας δείξω σύντομα ποια πλεονεκτήματα και μειονεκτήματα έχουν οι σταθερές διατάξεις.
• Τα πρότυπα σχεδιασμού είναι σίγουρα ευκολότερο να υλοποιηθούν εδώ.
• Αναφερόμενοι σε τυπικές αναλύσεις, σπάνια υπάρχουν προβλήματα με την παρουσίαση της ιστοσελίδας.
• Τα διατάξεις είναι εύκολα κατανοητά. (Αυτό το πλεονέκτημα σας ωφελεί φυσικά, όταν ως web developer θέλετε να εξηγήσετε μια διάταξη σε έναν πελάτη).
Ωστόσο, οι σταθερές διατάξεις έχουν επίσης μειονεκτήματα.
• Λόγω των σταθερών μετρήσεων, είναι ανεύκαμπες και αν δεν προσαρμόζονται σε πολύ μικρές ή μεγάλες οθόνες. Πολλές φορές χάνεται πολύς χώρος.
• Υπάρχουν περιορισμοί ως προς την προσβασιμότητα.
Οι ευέλικτες διατάξεις έχουν επίσης τα πλεονεκτήματά τους. Πρώτα απ 'όλα, τα πλεονεκτήματα.
• Οι διατάξεις προσαρμόζονται αυτόματα στο μέγεθος του παραθύρου περιήγησης.
• Οι επισκέπτες μπορούν να επηρεάσουν σημαντικά την παρουσίαση της ιστοσελίδας.
Υπάρχουν επίσης μειονεκτήματα.
• Οι αποτελεσματικές παράμετροι είναι δύσκολο να ελεγχθούν από εσάς ως προγραμματιστής. Επομένως, οι καθοδηγήσεις της διάταξης είναι εφικτές μόνο εν μέρει.
• Οι περιεχόμενα των σελίδων πρέπει να προσαρμοστούν με κοπιώδη τρόπο.
• Σε μεγάλες οθόνες, η παρουσίαση σύντομων κειμένων μπορεί να γίνει «άσχημη», καθώς αυτά μπορεί να εμφανίζονται συχνά σε μια σειρά. (Το CSS παρέχει ανάλογες ιδιότητες όπως min-width).
Ένας άλλος τύπος διάταξης αποτελεί μια μέση λύση μεταξύ των σταθερών και ευέλικτων διατάξεων. Αυτές είναι οι λεγόμενες ελαστικές διατάξεις. Το κύριο χαρακτηριστικό τους είναι η μονάδα μέτρησης em. (Τώρα όλο και περισσότερο γίνεται διαθέσιμο το rem. Σε αντίθεση με το em, το rem είναι πάντα στο στοιχείο root, όχι σε άνω στοιχείο).
Σε αυτές τις διατάξεις, το πλάτος και το ύψος είναι ευέλικτ
