Κατά τη σχεδίαση ενός ανταποκρινόμενου ιστότοπου, το Tailwind ' ορια ΑΝΤΟΧΗΣ ' και ' Ερωτήματα μέσων ” διαδραματίζουν βασικό ρόλο στην εφαρμογή πολλαπλών λειτουργιών που μπορούν να προσαρμοστούν εύκολα σε διαφορετικά μεγέθη οθόνης. Αυτά τα χαρακτηριστικά πρέπει να προσδιορίζονται μέσω διαφόρων κλάσεων, π.χ., ' md (οθόνες μεσαίου μεγέθους)', 'lg(οθόνη μεγάλου μεγέθους)' ή μέσω του '@media ” κανόνας που προσαρτά τις λειτουργίες με βάση την καθορισμένη συνθήκη.
Αυτό το άρθρο καλύπτει το ακόλουθο περιεχόμενο:
- Πώς να εφαρμόσετε το πάχος διακόσμησης κειμένου με σημεία διακοπής του ουρανού ανέμου και ερωτήματα πολυμέσων;
- Εφαρμογή του πάχους διακόσμησης κειμένου με σημεία διακοπής του ουράνιου ανέμου.
- Εφαρμογή του πάχους διακόσμησης κειμένου με ερωτήματα πολυμέσων Tailwind.
Πώς να εφαρμόσετε το πάχος διακόσμησης κειμένου με σημεία διακοπής του ουρανού ανέμου και ερωτήματα πολυμέσων;
Ο ' Πάχος διακόσμησης κειμένου ' μπορεί να εφαρμοστεί με τη βοήθεια του ' κείμενο-διακόσμηση-πάχος ιδιότητα ” ακολουθούμενη από την τιμή πάχους στόχου σε pixel. Αυτά τα εικονοστοιχεία μπορούν να είναι ' 1px', '2px', '4px' ή '8px '. Ο ' ορια ΑΝΤΟΧΗΣ ' εφαρμόζονται για την προσαρμογή διαφόρων εφαρμοζόμενων λειτουργιών σύμφωνα με το μέγεθος οθόνης του χρήστη χρησιμοποιώντας το ' md (οθόνες μεσαίου μεγέθους)', 'lg (οθόνη μεγάλου μεγέθους) 'τάξεις, κλπ. Το ' Ερωτήματα μέσων ' ενεργοποιήστε τα στυλ υλοποίησης υπό όρους που βασίζονται σε ένα σύνολο παραμέτρων προγράμματος περιήγησης και λειτουργικού συστήματος μέσω του '@ μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ 'κανόνας.
Παράδειγμα 1: Εφαρμογή του πάχους διακόσμησης κειμένου με σημεία διακοπής του ουρανού ανέμου
Αυτό το παράδειγμα ορίζει το πάχος της διακόσμησης κειμένου σε διαφορετικά σημεία για να εφαρμόσει το στυλ που ποικίλλει ανάλογα με τα μεγέθη οθόνης:
< html >
< κεφάλι >
< μετα σύνολο χαρακτήρων = 'utf-8' >
< μετα όνομα = 'Θύρα προβολής' περιεχόμενο = 'width=device-width, αρχική κλίμακα=1' >
< τίτλος >< / τίτλος >
< γραφή src = 'https://cdn.tailwindcss.com' >< / γραφή >
< / κεφάλι >
< σώμα >
< textarea τάξη = 'υπογράμμιση md:decoration-8 lg:box-decoration-slice text-black text-2xl' ταυτότητα = 'θερμοκρασία' > Αυτό είναι το Linuxhint < / textarea >
< / σώμα >
< / html >
Σύμφωνα με αυτό το απόσπασμα κώδικα, εφαρμόστε τα παρακάτω βήματα:
- Αρχικά, συμπεριλάβετε τη διαδρομή CDN για να εφαρμόσετε τις λειτουργίες Tailwind.
- Στη συνέχεια, κάντε ένα «< textarea >' και ενσωματώστε τα αναφερόμενα επίπεδα πάχους διακόσμησης κειμένου σε προεπιλεγμένες και μεσαίες οθόνες μέσω του ' md ” τάξη, αντίστοιχα.
- Ο ' κείμενο-μαύρο ' και ' κείμενο-2xl Οι τάξεις κατανέμουν το χρώμα (μαύρο) και το μέγεθος γραμματοσειράς, δηλαδή 2xl στο κείμενο, αντίστοιχα.
Παραγωγή
Από αυτό το αποτέλεσμα, μπορεί να υπονοηθεί ότι το πάχος της διακόσμησης κειμένου προσαρμόζεται κατάλληλα στο μεταβαλλόμενο μέγεθος οθόνης.
Παράδειγμα 2: Εφαρμογή του πάχους διακόσμησης κειμένου με ερωτήματα πολυμέσων Tailwind
Ο '@ μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ Ο κανόνας χρησιμοποιείται στα ερωτήματα πολυμέσων για την υλοποίηση διαφόρων στυλ για διαφορετικούς τύπους μέσων/συσκευές. Αυτή η συγκεκριμένη επίδειξη χρησιμοποιεί αυτά τα ερωτήματα μέσων για να διακοσμήσει το πάχος του κειμένου με βάση μια καθορισμένη παράμετρο/συνθήκη:
< html >
< κεφάλι >
< μετα σύνολο χαρακτήρων = 'utf-8' >
< μετα όνομα = 'Θύρα προβολής' περιεχόμενο = 'width=device-width, αρχική κλίμακα=1' >
< τίτλος >< / τίτλος >
< γραφή src = 'https://cdn.tailwindcss.com' >< / γραφή >
< / κεφάλι >
< σώμα >
< h1 ταυτότητα = 'θερμοκρασία' >Αυτό είναι Linuxhint< / h1 >
< / σώμα >
< / html >
< στυλ τύπος = 'κείμενο/css' >
#θερμοκρασία {
κείμενο-διακόσμηση: υπογράμμιση;
κείμενο- ευθυγραμμίζω : κέντρο;
}
@ μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ( Μέγιστη- πλάτος : 550 px ) {
#θερμοκρασία {
κείμενο-διακόσμηση-πάχος: 4px;
} }
< / στυλ >
Σε αυτό το μπλοκ κώδικα, εξετάστε τις παρακάτω μεθοδολογίες:
- Ομοίως, συμπεριλάβετε τη διαδρομή CDN.
- Στη συνέχεια, προσθέστε ένα «< h1 >» στοιχείο που έχει την ένδειξη «id».
- Στο τμήμα CSS του κώδικα, μέσα στο «< στυλ >” ετικέτα, στυλ της περιλαμβανόμενης επικεφαλίδας.
- Επίσης, δημιουργήστε το '@ μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ' κανόνας που εφαρμόζει μια συνθήκη τέτοια ώστε εφόσον το πλάτος της οθόνης είναι ' 550 εικονοστοιχεία ', το πάχος κειμένου-διακόσμηση έχει οριστεί σε ' 4 εικονοστοιχεία.
- Είναι τέτοιο που αφού το πλάτος της οθόνης υπερβεί αυτό το όριο, το κείμενο θα είναι απλώς υπογραμμισμένο.
Παραγωγή
Αυτό το αποτέλεσμα σημαίνει ότι ο κανόνας '@media', δηλαδή ερωτήματα πολυμέσων εφαρμόζεται σύμφωνα με το πλάτος της οθόνης.
συμπέρασμα
Τα σημεία διακοπής και τα ερωτήματα πολυμέσων μπορούν να εφαρμοστούν με πάχος διακόσμησης κειμένου για την εμφάνιση των εφαρμοζόμενων λειτουργιών σύμφωνα με το μέγεθος της οθόνης του χρήστη χρησιμοποιώντας διάφορες κατηγορίες όπως ' md', 'lg ' ή μέσω του '@ μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ” κανόνας, αντίστοιχα. Η τελευταία προσέγγιση προσδιορίζεται στο « CSS ” κωδικός που καλεί το στοιχείο προορισμού και το διακοσμεί με βάση την καθορισμένη παράμετρο/συνθήκη. Αυτός ο οδηγός επεξεργάστηκε την εφαρμογή του πάχους διακόσμησης κειμένου με το Tailwind Breakpoint και τα Media Queries.