Τι είναι το Responsive Web Design

• Ενδέχεται 19, 2024

Υπάρχουν τρία κύρια χαρακτηριστικά ενός ανταποκριτικού σχεδιασμού ιστοσελίδων, τα οποία είναι ρευστοποιήσιμα, εικόνες με δυνατότητα αλλαγής μεγέθους και ερωτήματα μέσων. Τα ερωτήματα των μέσων ενημέρωσης δεν είναι πραγματικά τόσο καινούργια για το σχεδιασμό ιστοσελίδων. Αρχίζοντας ως τύποι μέσων στο CSS2.1, θα μπορούσαμε να σχεδιάσουμε φύλλα στυλ για τον ιστό και την εκτύπωση, εξασφαλίζοντας κάπως ότι η ιστοσελίδα θα φανεί η ίδια στην οθόνη και όταν εκτυπωθεί. Αυτό προχώρησε σε ερωτήματα μέσων στο CSS3. Αυτό το ερώτημα ελέγχει το πλάτος της συσκευής πολυμέσων (max-device-width) και τα δοκιμάζει σε σχέση με μια καθορισμένη τιμή, όπως 480px ή 768px. Σε απάντηση σε αυτό το ερώτημα, χρησιμοποιούμε στυλ CSS για να αλλάξουμε τη διάταξη ρευστών και να αλλάξουμε το μέγεθος των εικόνων για την οθόνη.

Μπορείτε εύκολα να δοκιμάσετε εάν ένας ιστότοπος έχει μια ανταποκρινόμενη σχεδίαση. Ξεκινήστε με το πρόγραμμα περιήγησης σε όλο το πλάτος της οθόνης του υπολογιστή σας. Στη συνέχεια, σύρετε το δεξί άκρο του προγράμματος περιήγησης προς τα αριστερά για να μειώσετε το πλάτος του παραθύρου του προγράμματος περιήγησης. Θα πρέπει να δείτε τις εικόνες να γίνονται μικρότερες και η διάταξη θα πάρει τα πλωτά τμήματα που είναι δίπλα-δίπλα και τα στοιβάζονται κάθετα. Για παράδειγμα, αν διαθέτουμε έξι εικόνες ανά έξοδο ανά σελίδα σε μια σελίδα γκαλερί σε πλήρη οθόνη, καθώς μειώνουμε το πλάτος της οθόνης, ο αριθμός των εικόνων στη σειρά μειώνεται σταδιακά και στοιβάζεται ανάλογα με τις ανάγκες. Μόλις το πλάτος μειωθεί σε ένα ορισμένο ποσό, οι ίδιες οι εικόνες θα αρχίσουν να αλλάζουν μέγεθος μικρότερες. Αν παρακολουθήσετε προσεκτικά, θα δείτε επίσης ότι ορισμένα στοιχεία σχεδιασμού, όπως οι συνδέσεις πλοήγησης, μπορεί να μειωθούν σε ένα εικονίδιο ή ακόμα και να εξαφανιστούν. Αυτό ελέγχεται επίσης από το φύλλο στυλ CSS.

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

Οδηγίες Βίντεο: Introduction To Responsive Web Design - HTML & CSS Tutorial (Ενδέχεται 2024).