Εισαγωγή στη Σχεδίαση για Διαφορετικές Οθόνες στο CSS

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

Γενικά, οι συσκευές χωρίζονται σε τέσσερις κλάσεις: υπολογιστές (desktop), φορητοί υπολογιστές, άβακα (tablet) και τηλέφωνα (mobile).

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

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

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

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

Η παραπάνω σχεδίαση ονομάζεται προσαρμοστική ή ανταποκρινόμενη (responsive). Η μελέτη της είναι αυτό με το οποίο ασχολούμαστε στα επόμενα μαθήματα.