Σεμινάριο ανταποκριτικής σχεδίασης - Μάθετε σχεδίαση ανταποκριτικής ιστοσελίδας σε 5 λεπτά

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

  • Σχετικές μονάδες CSS
  • Ερωτήματα πολυμέσων
  • Flexbox
  • Αποκριτική τυπογραφία

Αν θέλετε να εξερευνήσετε βαθύτερα το θέμα αργότερα, μπορείτε να ρίξετε μια ματιά στο bootcamp που ανταποκρίνεται στον προγραμματιστή ιστού στο Scrimba, το οποίο θα σας επιτρέψει να δημιουργήσετε ανταποκρινόμενους ιστότοπους σε επαγγελματικό επίπεδο.

Αλλά για τώρα, ας ξεκινήσουμε με τα βασικά!

Σχετικές μονάδες CSS

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

Τα πιο συνηθισμένα είναι:

  • %
  • τους
  • υπενθύμιση
  • vw
  • vh

Σε αυτό το άρθρο, θα ξεκινήσουμε με τη μονάδα ποσοστού %και, στη συνέχεια, θα εξετάσουμε τη remμονάδα στην τελική ενότητα.

Ας υποθέσουμε ότι έχετε έναν πολύ απλό ιστότοπο, όπως αυτό:

Κείμενο Alt

Το HTML του είναι ακριβώς το ακόλουθο:

Welcome to my website

Όπως μπορείτε να δείτε από το GIF παρακάτω, η εικόνα μας θα έχει από προεπιλογή σταθερό πλάτος:

Κείμενο Alt

Αυτό δεν ανταποκρίνεται ιδιαίτερα, οπότε ας το αλλάξουμε σε 70 τοις εκατό. Θα κάνουμε απλά τα εξής:

.myImg { width: 70%; } 

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

Εδώ είναι το αποτέλεσμα:

Κείμενο Alt

Και είναι τόσο εύκολο να δημιουργήσετε μια αποκριτική εικόνα!

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

Αντιμετωπίζουμε ένα πρόβλημα με την απόκριση της διάταξής μας, που είναι ότι φαίνεται περίεργο σε πολύ μικρές οθόνες. Το πλάτος 70% πρόκειται να μειωθεί όταν προβάλλεται σε κινητό. Απλά ρίξτε μια ματιά για τον εαυτό σας:

Κείμενο Alt

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

Δείτε πώς δημιουργούμε ένα ερώτημα πολυμέσων στο CSS:

@media (max-width: 768px) { .myImage { width: 100% } } 

Αυτό το μπλοκ CSS θα εφαρμοστεί μόνο εάν το πλάτος της οθόνης είναι μικρότερο από 768 pixel.

Εδώ είναι το αποτέλεσμα:

Κείμενο Alt

Όπως μπορείτε να δείτε, η σελίδα έχει ένα σημείο διακοπής όπου η εικόνα ξαφνικά γίνεται ευρύτερη. Τότε είναι που το πρόγραμμα περιήγησης έχει πλάτος 768 εικονοστοιχεία και η εικόνα αλλάζει μεταξύ 70%και 100%.

Χρήση του Flexbox για το navbar

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

Για να χρησιμοποιήσουμε το Flexbox θα κάνουμε τον ιστότοπό μας λίγο πιο περίπλοκο προσθέτοντας ένα navbar πάνω από τον τίτλο. Εδώ είναι το HTML για αυτό:

 Home About me Contact  

Από προεπιλογή, θα μοιάζει απλά με αυτό.

Κείμενο Alt

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

Για να το επιτύχουμε, απλώς θα μετατρέψουμε το κοντέινερ nav σε flexbox και, στη συνέχεια, θα χρησιμοποιήσουμε τη μαγική justify-contentιδιότητα.

nav { display: flex; justify-content: space-around; } 

Το display: flexμετατρέπει σε ένα ευέλικτο πλαίσιο και justify-content: space-aroundλέει στο πρόγραμμα περιήγησης ότι τα αντικείμενα μέσα στο ευέλικτο πλαίσιο πρέπει να έχουν χώρο γύρω τους. Έτσι, το πρόγραμμα περιήγησης κατανέμει όλο το χώρο που απομένει εξίσου γύρω από τα τρία στοιχεία.

Δείτε πώς φαίνεται. Και όπως θα παρατηρήσετε, ζυγίζει όμορφα:

Κείμενο Alt

Αποκριτική τυπογραφία: rem

Το τελευταίο βήμα είναι να ανταποκριθούμε και στην τυπογραφία μας. Βλέπετε, θέλω η γραμμή πλοήγησης και ο τίτλος να συρρικνωθούν λίγο όταν η οθόνη έχει πλάτος μικρότερο από 768 pixel (το σημείο διακοπής του ερωτήματος πολυμέσων μας, θυμηθείτε;).

Ένας τρόπος για να γίνει αυτό θα ήταν να μειώσετε όλα τα μεγέθη γραμματοσειρών στο ερώτημα πολυμέσων, όπως αυτό:

@media (max-width: 768px) { nav { font-size: 14px; } h1 { font-size: 28px; } } 

Αυτό όμως δεν είναι ιδανικό. Ενδέχεται να καταλήξουμε σε πολλά σημεία διακοπής στην εφαρμογή και να έχουμε και πολλά στοιχεία (h2, h3, παράγραφοι κ.λπ.). Ως αποτέλεσμα, θα πρέπει να παρακολουθούμε όλα τα στοιχεία σε όλα τα διαφορετικά σημεία διακοπής. Θα είναι χάος!

Ωστόσο, κατά πάσα πιθανότητα, πρόκειται να συσχετιστούν μεταξύ τους με τον ίδιο ή περισσότερο τρόπο σε όλα τα σημεία διακοπής. Για παράδειγμα, το h1θα είναι πάντα μεγαλύτερο από το paragraph.

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

Εισαγάγετε rems!

A remείναι βασικά αυτό: η τιμή μεγέθους γραμματοσειράς που έχετε ορίσει στο στοιχείο σας . Μου αρέσει αυτό:

html { font-size: 14px; } 

Έτσι σε αυτό το έγγραφο, το ένα remισούται με 14 εικονοστοιχεία.

Αυτό σημαίνει ότι μπορούμε να ορίσουμε όλα τα μεγέθη γραμματοσειρών στον ιστότοπό μας σε remμονάδες, όπως αυτό:

h1 { font-size: 2rem; } nav { font-size: 1rem; } 

Και μετά απλώς θα αλλάξουμε την τιμή μεγέθους γραμματοσειράς για την ετικέτα μέσα στο ερώτημα πολυμέσων. Αυτό θα διασφαλίσει ότι το μέγεθος της γραμματοσειράς h1και των   navστοιχείων μας θα αλλάξει επίσης.

Δείτε πώς αλλάζουμε την remαξία μας σε ένα ερώτημα πολυμέσων:

@media (max-width: 768px) { html { font-size: 14px } } 

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

Κείμενο Alt

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

Αν σας ενδιαφέρει να συνεχίσετε αυτό το ταξίδι μάθησης, θα σας συνιστούσα να ρίξετε μια ματιά στο τεράστιο μάθημα Scrimba για το θέμα! Διδάσκονται από έναν από τους πιο δημοφιλείς καθηγητές του YouTube σχετικά με το θέμα και θα σας οδηγήσουν σε επαγγελματικό επίπεδο στον ανταποκρινόμενο σχεδιασμό ιστοσελίδων.

Καλή κωδικοποίηση :)

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