Αυτό το άρθρο θα εξηγήσει πώς να χρησιμοποιήσετε το σημείο διακοπής και το ερώτημα πολυμέσων σε συνδυασμό με την ιδιότητα θέσης στο Tailwind.
Πώς να χρησιμοποιήσετε τα σημεία διακοπής και τα ερωτήματα πολυμέσων με την ιδιότητα θέσης;
Τα σημεία διακοπής είναι τα βασικά μπλοκ για τη δημιουργία ενός απόλυτου σχεδιασμού με απόκριση. Χρησιμοποιείται για να κάνει τη διάταξη προσαρμόσιμη σε διαφορετικά μεγέθη οθόνης. Τα ερωτήματα πολυμέσων χρησιμοποιούνται για την εφαρμογή καθορισμένων στυλ σε στοιχεία ανάλογα με την ανάλυση οθόνης. Το χαρακτηριστικό θέσης μπορεί να εφαρμοστεί σε συνδυασμό με αυτά για να κάνει την έξοδο πιο βελτιστοποιημένη.
Βήμα 1: Εφαρμογή της ιδιότητας θέσης με σημεία διακοπής και ερωτήματα πολυμέσων
Σε αυτό το βήμα, το πρόγραμμα εισάγεται για την εφαρμογή της ιδιότητας θέσης κατά μήκος των σημείων διακοπής ή των ερωτημάτων μέσων πάνω από το επιλεγμένο ' Π ' στοιχείο:
< σώμα τάξη = 'bg-slate-500' >
< div τάξη = 'text-yellow-300 p-4 lg:p-8' >
< Π τάξη = 'σχετικό md:απόλυτο md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > Αυτό το κείμενο θα έχει διαφορετικά μεγέθη γραμματοσειράς με βάση το μέγεθος της οθόνης. Θα είναι μικρότερο σε μικρές οθόνες, μεσαίου μεγέθους σε μεσαίες οθόνες και μεγαλύτερο σε μεγάλες οθόνες. < / Π >
< / div >
< / σώμα >
Σε αυτόν τον κώδικα:
- ' bg-slate-500 ” ορίζει το χρώμα φόντου σε γκρι.
- ' κείμενο-κίτρινο-300 ' αλλάζει το χρώμα του κειμένου σε κίτρινο.
- ' σ-4 ” προσθέτει ένα padding 4 px.
- ' lg: p-8' προσθέτει ένα padding 8 px σε μεγάλες οθόνες.
- Η αρχική θέση ορίζεται σε σχέση με τη γονική σελίδα χρησιμοποιώντας το « συγγενής ” τάξη.
- ' md:text-lg ” κάνει το κείμενο μεγάλο σε μια μεσαίου μεγέθους οθόνη.
- “md:απόλυτο” τροποποιεί τη θέση του κειμένου από σχετική σε απόλυτη σε μια οθόνη μεσαίου μεγέθους.
- ' md:translate-x-4' και 'md:translate-y-4' μετακινήστε το κείμενο 4 εικονοστοιχεία προς τα κάτω και προς τα δεξιά σε μεσαίο μέγεθος οθόνης.
- ' lg:text-xl ” αλλάζει το μέγεθος του κειμένου σε εξαιρετικά μεγάλο σε μια οθόνη μεγάλου μεγέθους.
- ' lg:static ” αλλάζει τη θέση του κειμένου σε σχέση με τη μητρική σελίδα από απόλυτη σε στατική σε μια οθόνη μεγάλου μεγέθους
- ' lg:translate-x-4 ' και ' lg:translate-y-4 Μετακινήστε το κείμενο 4 εικονοστοιχεία προς τα κάτω και προς τα δεξιά σε ένα μεγάλο μέγεθος οθόνης.
Βήμα 2: Επαληθεύστε την έξοδο
Κάντε προεπισκόπηση της ιστοσελίδας που δημιουργήθηκε από τον παραπάνω κώδικα και προσαρμόστε το μέγεθος της οθόνης για να δείτε την αλλαγή ως:
Μπορεί να φανεί ότι το κείμενο δείχνει συμπεριφορά απόκρισης σε μεσαία και μεγάλα μεγέθη οθόνης.
συμπέρασμα
Για να χρησιμοποιήσετε σημεία διακοπής και ερωτήματα πολυμέσων στο Tailwind, εφαρμόστε το σημείο διακοπής και ορίστε το ερώτημα πολυμέσων σε κάθε σημείο διακοπής και επίσης αλλάξτε την ιδιότητα θέσης σε διαφορετικά σημεία διακοπής της οθόνης. Οι προεπιλεγμένες αναλύσεις είναι ' sm ',' md ',' lg ', και ' xl '. Αυτό το ιστολόγιο έχει δείξει πώς να χρησιμοποιείτε το σημείο διακοπής και το ερώτημα πολυμέσων με την ιδιότητα θέσης στο Tailwind.