Αυτό το άρθρο παρουσιάζει τα βήματα για τη δημιουργία μιας αποκριτικής σχεδίασης ιστότοπου σε HTML και CSS χρησιμοποιώντας:
Πώς να δημιουργήσετε ένα Responsive Website Design με HTML και CSS;
Η δημιουργία μιας αποκριτικής σχεδίασης ιστότοπου με HTML και CSS περιλαμβάνει τη δημιουργία μιας διάταξης που προσαρμόζεται σε διαφορετικά μεγέθη οθόνης και αναλύσεις. Ακολουθούν τα βήματα που μπορείτε να ακολουθήσετε για να δημιουργήσετε ένα responsive σχέδιο ιστότοπου:
Βήμα 1: Μετα-ετικέτα Viewport
Ο ' θέαση Η μετα-ετικέτα παίζει ζωτικό ρόλο στη δημιουργία ενός responsive web design. Εισάγεται μέσα στο ' <κεφάλι> ετικέτα του αρχείου HTML που περιέχει τα ακόλουθα χαρακτηριστικά:
< μετα όνομα = 'Θύρα προβολής' περιεχόμενο = 'width=device-width,initial-scale=1' / >
Η παραπάνω μετα-ετικέτα έχει δύο χαρακτηριστικά:
- Ο ' όνομα Το χαρακτηριστικό ” λέει το όνομα της λειτουργικότητας για την οποία δημιουργείται/χρησιμοποιείται αυτή η ετικέτα. Για παράδειγμα, ορίζοντας το ' θέαση ' στο ' όνομα ” για την αντιμετώπιση της θύρας προβολής διαφορετικών συσκευών.
- Ο ' περιεχόμενο Το χαρακτηριστικό ' ορίζει την προηγούμενη τιμή χαρακτηριστικού. Ορίζει το πλάτος κάθε συσκευής και κλιμακώνει το έγγραφο/ιστοσελίδα στο 100%.
Βήμα 2: Αποκριτικές εικόνες
Καθώς το μέγεθος της εικόνας διαφέρει μεταξύ τους, επομένως, είναι δύσκολο να ορίσετε το ίδιο ' ύψος ' ή ' πλάτος ” ιδιοκτησία για κάθε εικόνα. Όταν το μέγεθος της εικόνας είναι σταθερό, τότε οι χρήστες δεν αλλάζουν το μέγεθος της εικόνας της ιστοσελίδας με την οθόνη. Ωστόσο, οι χρήστες μπορούν να ορίσουν την αποκριτική εικόνα μέσω του ακόλουθου κώδικα:
img {
Μέγιστη- πλάτος : 100 %;
}
Ο ' μέγιστο πλάτος ” Η ιδιότητα CSS περιορίζει την εμφάνιση της εικόνας μέσα στον εκχωρημένο χώρο της. Ορίζοντας την τιμή σε '%', η εικόνα αλλάζει μέγεθος μαζί με το μέγεθος του γονικού της στοιχείου. Αυτό δημιουργεί ένα εφέ απόκρισης για την εικόνα.
Βήμα 3: Διάταξη Flexbox
Η διάταξη Flexbox συνιστάται ιδιαίτερα για τη δημιουργία μιας αποκριτικής σχεδίασης ιστότοπου. Επιτρέπει στα στοιχεία HTML να εμφανίζονται σε μια συγκεκριμένη θέση και να αλλάζουν το μέγεθος του διαθέσιμου χώρου για κάθε παιδί ανάλογα με το μέγεθος που είναι διαθέσιμο από το γονικό div. Η διάταξη Flexbox περιέχει πολλές ιδιότητες που παρέχουν μεγάλη ελευθερία στον προγραμματιστή, όπως στον παρακάτω κώδικα:
< στυλ >
.μητρική εταιρεία {
οθόνη: flex;
}
.παιδί {
καλώδιο: 1 ;
κείμενο- ευθυγραμμίζω : κέντρο;
}
< / στυλ >
< σώμα >
< div τάξη = 'μητρική εταιρεία' >
< div τάξη = 'παιδί' στυλ = 'περίγραμμα: 3 εικονοστοιχεία συμπαγές μπλε βιολετί;' >Καλώς ήρθες< / div >
< div τάξη = 'παιδί' στυλ = 'περίγραμμα: 3 εικονοστοιχεία συμπαγές σκούρο πράσινο;' >προς< / div >
< div τάξη = 'παιδί' στυλ = 'περίγραμμα: 3 εικονοστοιχεία συμπαγές κόκκινο;' >Linuxint< / div >
< / div >
< / σώμα >
Στο παραπάνω απόσπασμα κώδικα:
- Αρχικά, δημιουργήστε ένα γονικό στοιχείο div με ένα αναγνωριστικό ' μητρική εταιρεία ' μεσα στην ' <σώμα> ετικέτα '.
- Στη συνέχεια, δημιουργήστε πολλά θυγατρικά στοιχεία div και αντιστοιχίστε τους μια κλάση ' παιδί '.
- Στη συνέχεια, επιλέξτε το ' μητρική εταιρεία ' τάξη και παρέχετε την τιμή του ' καλώδιο 'για το CSS' απεικόνιση ” ιδιοκτησία.
- Μετά από αυτό, δώστε μια τιμή ' 1 ' στο ' καλώδιο “περιουσία σε κάθε” παιδί ” κλάση που κάνει το στοιχείο παιδί να εμφανίζεται ως flex.
Μετά την εκτέλεση του παραπάνω κώδικα, η ιστοσελίδα μοιάζει με αυτό:
Η παραπάνω έξοδος δείχνει ότι το θυγατρικό στοιχείο αποκτά ίσο πλάτος όταν αλλάζει το μέγεθος του προγράμματος περιήγησης.
Βήμα 4: Διάταξη πλέγματος
Η διάταξη πλέγματος δημιουργεί ένα πλέγμα και εκχωρεί τα στοιχεία HTML μέσα στο τμήμα πλέγματος. Τα στοιχεία πλέγματος αλλάζουν σε σχέση με το μέγεθος οθόνης της ιστοσελίδας. Δημιουργεί μια αποκριτική σχεδίαση καθώς το μέγεθος του στοιχείου HTML αλλάζει ανάλογα με την οθόνη της συσκευής:
< στυλ >.δοχείο {
οθόνη: πλέγμα;
πλέγμα-πρότυπο-στήλες: 1fr 1fr 1fr;
}
< / στυλ >
< σώμα >
< div τάξη = 'συστατικό' >
< div στυλ = 'border: 3px συμπαγές δασοπράσινο;' >Linuxint< / div >
< div στυλ = 'περίγραμμα: 3 εικονοστοιχεία συμπαγές σκούρο πράσινο;' >Linuxint< / div >
< div στυλ = 'περίγραμμα: 3 εικονοστοιχεία συμπαγές κόκκινο;' >Linuxint< / div >
< / div >
< / σώμα >
Στον παραπάνω κώδικα:
- Πρώτα, δημιουργήστε ένα γονικό div και αντιστοιχίστε του μια κλάση ' συστατικό ' μεσα στην ' <σώμα> ετικέτα '. Μετά από αυτό, δημιουργήστε τρία στοιχεία div σε αυτό.
- Στη συνέχεια, στο αρχείο CSS αντιστοιχίστε ένα ' πλέγμα 'τιμή στο ' απεικόνιση ” ακίνητο για το ” δοχείο ” div.
- Μετά από αυτό, δημιουργήστε τρία ισομεγέθη τμήματα στην ιστοσελίδα χρησιμοποιώντας το ' πλέγμα-πρότυπο-στήλη 'ιδιότητα και ορίστε το ίσο με ' 1fr 1fr 1fr 'όπου fr σημαίνει' κλάσμα '.
Μετά τη μεταγλώττιση του παραπάνω κώδικα, η έξοδος μοιάζει με αυτό:
Η έξοδος δείχνει ότι τα div αλλάζουν το μέγεθος ανάλογα με το μέγεθος της οθόνης με ίσες αναλογίες.
Βήμα 5: Ερωτήματα πολυμέσων
Η χρήση ερωτημάτων πολυμέσων για τη δημιουργία αποκριτικής σχεδίασης είναι ένα είδος παλιάς σχολής, αλλά παρόλα αυτά, οι περισσότεροι ιστότοποι χρησιμοποιούν ερωτήματα πολυμέσων. Τα ερωτήματα πολυμέσων μπορούν να προστεθούν απευθείας στο αρχείο CSS μετά την προσθήκη του προεπιλεγμένου στυλ για το επιλεγμένο στοιχείο HTML. Το ερώτημα πολυμέσων κάνει τον κώδικα λίγο μεγαλύτερο και ακατάστατο. Επειδή ο προγραμματιστής πρέπει να εισάγει κώδικα για κάθε μέγεθος οθόνης ξεχωριστά.
Για παράδειγμα, δείτε το παρακάτω απόσπασμα κώδικα:
@ μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ οθόνη και ( ελάχ. πλάτος : 640 px ) {.συστατικό {
Ιστορικό- χρώμα : πράσινο του δάσους;
}
}
Στο παραπάνω απόσπασμα κώδικα:
- Αρχικά, ορίστε το ερώτημα μέσων που εφαρμόζει τις ιδιότητες CSS στην επιλεγμένη κλάση στοιχείων ' συστατικό ' όταν το πλάτος του μεγέθους της οθόνης γίνει μεγαλύτερο από ' 640 εικονοστοιχεία '.
- Στη συνέχεια, επιλέξτε την 'κλάση στοιχείων και ορίστε την τιμή του ' πράσινο του δάσους ' για το ' χρώμα του φόντου ” ιδιοκτησία.
.συστατικό {
Ιστορικό- χρώμα : Dodgeblue;
}
}
Στη συνέχεια, για το παραπάνω απόσπασμα κώδικα:
- Ρυθμίστε το ερώτημα μέσων ώστε να εφαρμόζει στυλ όταν το μέγεθος πλάτους είναι μικρότερο από ' 1000 px '.
- Τώρα, επιλέξτε το ' συστατικό 'κλάση και παρέχετε μια τιμή ' dodgeblue ' για το ' χρώμα του φόντου ” ιδιοκτησία:
Μετά την εκτέλεση των παραπάνω αποσπασμάτων κώδικα, η έξοδος μοιάζει με αυτό:
Η έξοδος εμφανίζει ότι το ερώτημα πολυμέσων αλλάζει το φόντο με βάση το μέγεθος της οθόνης. Το μέγεθος της γραμματοσειράς, το πλάτος, το ύψος και άλλες ιδιότητες CSS μπορούν επίσης να εφαρμοστούν ακολουθώντας το ίδιο μοτίβο.
Τα πιθανά μεγέθη οθόνης σημείων διακοπής που πρέπει να λαμβάνονται υπόψη κατά τη χρήση των ερωτημάτων πολυμέσων είναι:
- Για ' μικρό ' Μέγεθος οθόνης, ορίστε το πλάτος μικρότερο από ' 640 εικονοστοιχεία '.
- Για ' Μεσαίο ' Μέγεθος οθόνης θύρας προβολής, το πλάτος κυμαίνεται μεταξύ ' 641 px ' και ' 1007 εικονοστοιχεία '.
- Για ' μεγάλο 'μέγεθος οθόνης, ορίστε το πλάτος σε ' 1008 εικονοστοιχεία ” ή μεγαλύτερη.
συμπέρασμα
Για να δημιουργήσετε μια αποκριτική σχεδίαση ιστότοπου, οι προγραμματιστές πρέπει να προσθέσουν το ' θύρα προβολής 'ετικέτα στο ' <κεφάλι> ενότητα ετικέτας. Στη συνέχεια, χρησιμοποιήστε το ' Flexbox ' και ' Πλέγμα ' Διάταξη. Αυτές οι μονάδες διάταξης βοηθούν στη δημιουργία ενός σχεδιασμού με απόκριση. Στο τέλος, το « ερωτήματα μέσων Βοηθήστε τον προγραμματιστή να σχεδιάσει διαφορετικές εκδόσεις του ίδιου ιστότοπου για διαφορετικά μεγέθη οθόνης. Αυτό το άρθρο έχει δείξει τα βήματα με τα οποία μπορεί να δημιουργηθεί μια αποκριτική σχεδίαση ιστότοπου.