Αυτό το άρθρο θα εξηγήσει τη μέθοδο εφαρμογής σημείων διακοπής και ερωτημάτων μέσων στο πλέγμα σειρών στο Tailwind CSS.
Πώς να εφαρμόσετε σημεία διακοπής και ερωτήματα πολυμέσων στο πλέγμα γραμμών στο Tailwind;
Για να εφαρμόσετε σημεία διακοπής και ερωτήματα πολυμέσων στο πλέγμα σειρών στο Tailwind, δημιουργήστε ένα πρόγραμμα HTML. Στη συνέχεια, καθορίστε τον αριθμό των σειρών για διάφορα μεγέθη οθόνης χρησιμοποιώντας το ' sm », « md ' ή ' lg 'σημεία διακοπής με το ' πλέγμα-γραμμές-<τιμή> ” βοηθητικά προγράμματα. Στη συνέχεια, διασφαλίστε τις αλλαγές στην ιστοσελίδα προσαρμόζοντας το μέγεθος της οθόνης.
Ας διερευνήσουμε την πρακτική εφαρμογή:
Βήμα 1: Χρησιμοποιήστε τα σημεία διακοπής και τα ερωτήματα πολυμέσων με το πλέγμα γραμμών στο πρόγραμμα HTML
Δημιουργήστε ένα πρόγραμμα HTML και ορίστε τον αριθμό των σειρών για διαφορετικά μεγέθη οθόνης με το ' πλέγμα-γραμμές-<τιμή> ” χρησιμότητα. Για παράδειγμα, χρησιμοποιήσαμε το « md 'σημείο διακοπής με το ' πλέγμα-γραμμές-3 'χρησιμότητα και' lg 'σημεία διακοπής με το ' πλέγμα-γραμμές-5 ” βοηθητικά προγράμματα για την αλλαγή του αριθμού των σειρών σε διάφορα μεγέθη οθόνης:
< σώμα >
< div τάξη = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div τάξη = 'bg-teal-500 p-5' > 1 < / div >
< div τάξη = 'bg-teal-500 p-5' > 2 < / div >
< div τάξη = 'bg-teal-500 p-5' > 3 < / div >
< div τάξη = 'bg-teal-500 p-5' > 4 < / div >
< div τάξη = 'bg-teal-500 p-5' > 5 < / div >
< div τάξη = 'bg-teal-500 p-5' > 6 < / div >
< div τάξη = 'bg-teal-500 p-5' > 7 < / div >
< div τάξη = 'bg-teal-500 p-5' > 8 < / div >
< div τάξη = 'bg-teal-500 p-5' > 9 < / div >
< div τάξη = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / σώμα >
Εδώ:
- ' πλέγμα Η κλάση χρησιμοποιείται για τη δημιουργία διάταξης πλέγματος.
- ' πλέγμα-γραμμές-2 Η κλάση ” προσδιορίζει ότι το πλέγμα πρέπει να έχει 2 σειρές ίσου μεγέθους.
- ' md:grid-rows-3 Η κλάση αλλάζει το πλέγμα σε 3 σειρές ίσου μεγέθους σε μεσαίο μέγεθος οθόνης.
- ' lg:grid-rows-5 Η κλάση αλλάζει το πλέγμα σε 5 σειρές ίσου μεγέθους στη μεγάλη οθόνη.
- ' πλέγμα-ροή-κολ Η τάξη ” τοποθετεί τα στοιχεία του πλέγματος οριζόντια σε στήλες.
- ' κενό-3 Η κλάση ορίζει μια απόσταση 3 μονάδων μεταξύ κάθε στοιχείου πλέγματος.
- ' m-3 Η κλάση εφαρμόζει ένα περιθώριο 3 μονάδων γύρω από το δοχείο πλέγματος.
- ' κείμενο-κέντρο Η κλάση θέτει το κείμενο κάθε στοιχείου πλέγματος στο κέντρο.
- ' bg-teal-500 Η τάξη ρυθμίζει το γαλαζοπράσινο χρώμα στο φόντο των στοιχείων πλέγματος.
- ' σ-5 Η τάξη προσθέτει ένα padding 5 μονάδων στο περιεχόμενο μέσα στο παιδί
είδη.
Βήμα 2: Επαλήθευση εξόδου
Για να διασφαλίσετε ότι τα σημεία διακοπής και τα ερωτήματα πολυμέσων έχουν εφαρμοστεί στο πλέγμα σειρών, προβάλετε την ιστοσελίδα HTML αλλάζοντας το μέγεθος οθόνης:
Στην παραπάνω έξοδο, φαίνεται ότι ο αριθμός των σειρών αλλάζει ανάλογα με το μέγεθος της οθόνης. Αυτό υποδεικνύει ότι τα σημεία διακοπής και τα ερωτήματα πολυμέσων έχουν εφαρμοστεί με επιτυχία στο πλέγμα σειρών.
συμπέρασμα
Για να εφαρμόσετε σημεία διακοπής και ερωτήματα πολυμέσων στο πλέγμα σειρών στο Tailwind, ορίστε τον αριθμό των σειρών για διάφορα μεγέθη οθόνης χρησιμοποιώντας το ' sm », « md ' ή ' lg 'σημεία διακοπής με το ' πλέγμα-γραμμές-<τιμή> ” βοηθητικά προγράμματα. Στη συνέχεια, διασφαλίστε τις αλλαγές στην ιστοσελίδα αλλάζοντας το μέγεθος της οθόνης. Αυτό το άρθρο αποτελεί παράδειγμα της μεθόδου εφαρμογής σημείων διακοπής και ερωτημάτων μέσων στο πλέγμα σειρών στο Tailwind CSS.