Αυτή η εγγραφή θα απεικονίσει τη μέθοδο χρήσης των αποκρινόμενων σημείων διακοπής στο Tailwind CSS.
Πώς να χρησιμοποιήσετε τα Responsive Breakpoints στο Tailwind;
Για να χρησιμοποιήσετε σημεία διακοπής απόκρισης στο Tailwind, χρησιμοποιήστε τους τροποποιητές απόκρισης, όπως ' sm », « md », « lg », « xl ' και ' 2xl ” με τις άλλες κλάσεις στο πρόγραμμα HTML. Στη συνέχεια, προβάλετε την ιστοσελίδα HTML και αλλάξτε το μέγεθος της οθόνης για να βεβαιωθείτε ότι τα σημεία διακοπής λειτουργούν σωστά.
Βήμα 1: Χρησιμοποιήστε Responsive Modifiers σε πρόγραμμα HTML
Δημιουργήστε ένα πρόγραμμα HTML και χρησιμοποιήστε τους τροποποιητές που αποκρίνονται με το επιθυμητό στυλ. Για παράδειγμα, χρησιμοποιήσαμε το « sm », « md », « lg », « xl ' και ' 2xl ” ανταποκρινόμενοι τροποποιητές:
< σώμα >
< div τάξη = 'h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 τάξη = 'text-7xl text-white text-center p-20' > Υπόδειξη Linux < / h1 >
< / div >
< / σώμα >
Εδώ:
- ' bg-φούξια-400 Η κλάση ορίζει το χρώμα φόντου του προς φούξια.
- ' sm:bg-ροζ-600 Η τάξη εφαρμόζει ροζ χρώμα στο φόντο για μικρές οθόνες.
- ' md:bg-green-700 Η τάξη αλλάζει το χρώμα φόντου σε πράσινο σε μεσαίες οθόνες.
- ' lg:bg-μωβ-50 Η τάξη ρυθμίζει το χρώμα φόντου σε μωβ για μεγάλες οθόνες.
- ' xl:bg-teal-600 Η τάξη ” εφαρμόζει γαλαζοπράσινο χρώμα στο φόντο για πολύ μεγάλες οθόνες.
- ' 2xl:bg-κίτρινο-500 Η τάξη αλλάζει το χρώμα φόντου σε κίτρινο σε οθόνες 2xl.
Βήμα 2: Επαληθεύστε την έξοδο
Προβάλετε την ιστοσελίδα HTML για να επαληθεύσετε εάν τα σημεία διακοπής που αποκρίνονται λειτουργούν σωστά ή όχι:
Στην παραπάνω ιστοσελίδα, μπορεί να παρατηρηθεί ότι το χρώμα της ιστοσελίδας αλλάζει ανάλογα με το μέγεθος της οθόνης σύμφωνα με το οποίο καθορίστηκαν τα σημεία διακοπής.
συμπέρασμα
Για να χρησιμοποιήσετε σημεία διακοπής απόκρισης στο Tailwind, χρησιμοποιήστε τους τροποποιητές απόκρισης, όπως ' sm », « md », « lg », « xl ' και ' 2xl ” με τις άλλες κλάσεις στο πρόγραμμα HTML. Αυτοί οι τροποποιητές χρησιμοποιούνται για την εφαρμογή διαφορετικών στυλ σε ένα συγκεκριμένο στοιχείο με βάση το μέγεθος της οθόνης. Αυτή η εγγραφή αποτελεί παράδειγμα της μεθόδου χρήσης των αποκρινόμενων σημείων διακοπής στο Tailwind CSS.