Lors de la conception d'un site Web réactif, le Tailwind ' Points d'arrêt ' et ' Requêtes multimédias ' jouent un rôle clé dans l'application de multiples fonctionnalités qui peuvent être adaptées facilement à différentes tailles d'écran. Ces fonctionnalités doivent être spécifiées via différentes classes, c'est-à-dire ' md (écrans de taille moyenne) », « lg (écran de grande taille) » ou via le « @media » règle qui ajoute les fonctionnalités en fonction de la condition spécifiée.
Cet article couvre le contenu suivant :
- Comment appliquer l'épaisseur de la décoration du texte avec les points d'arrêt Tailwind et les requêtes multimédias ?
- Application de l'épaisseur de la décoration du texte avec des points d'arrêt Tailwind.
- Application de l'épaisseur de la décoration du texte avec les requêtes multimédia Tailwind.
Comment appliquer l'épaisseur de la décoration du texte avec les points d'arrêt Tailwind et les requêtes multimédias ?
Le ' Décoration du texte Épaisseur ' peut être appliqué à l'aide du ' texte-décoration-épaisseur ' Propriété suivie de la valeur d'épaisseur cible en pixels. Ces pixels peuvent être « 1px', '2px', '4px' ou '8px ». Le ' Points d'arrêt ' sont appliqués pour adapter diverses fonctionnalités appliquées en fonction de la taille de l'écran de l'utilisateur à l'aide du ' md (écrans de taille moyenne)', 'lg (écran de grande taille) ' cours, etc. Le ' Requêtes multimédias ' Activez les styles d'implémentation conditionnelle basés sur un ensemble de paramètres de navigateur et de système d'exploitation via le ' @ médias ' règle.
Exemple 1 : Application de l'épaisseur de la décoration du texte avec des points d'arrêt Tailwind
Cet exemple définit l'épaisseur de la décoration du texte en différents points pour appliquer le style qui varie en fonction des tailles d'écran :
< HTML >
< tête >
< méta jeu de caractères = 'utf-8' >
< méta nom = 'portée d'affichage' contenu = 'largeur=largeur de l'appareil, échelle initiale=1' >
< titre >< / titre >
< scénario src = 'https://cdn.tailwindcss.com' >< / scénario >
< / tête >
< corps >
< zone de texte classe = 'souligner md:decoration-8 lg:box-decoration-slice text-black text-2xl' identifiant = 'température' > C'est un indice Linux < / zone de texte >
< / corps >
< / HTML >
Selon cet extrait de code, appliquez les étapes ci-dessous :
- Tout d’abord, incluez le chemin CDN pour appliquer les fonctionnalités Tailwind.
- Ensuite, faites un « < zone de texte > » et incorporez les niveaux d’épaisseur de décoration de texte indiqués sur les écrans par défaut et moyens via l’élément « Maryland 'classe, respectivement.
- Le ' texte-noir ' et ' texte-2xl ' Les classes attribuent respectivement la couleur (noir) et la taille de la police, c'est-à-dire 2xl au texte.
Sortir
De ce résultat, on peut déduire que l’épaisseur de la décoration du texte est adaptée de manière appropriée aux différentes tailles d’écran.
Exemple 2 : application de l'épaisseur de la décoration du texte avec les requêtes multimédia Tailwind
Le '@ médias 'La règle est utilisée dans les requêtes multimédias pour implémenter différents styles pour différents types/périphériques de média. Cette démonstration particulière utilise ces requêtes multimédias pour décorer l'épaisseur du texte en fonction d'un paramètre/condition spécifié :
< HTML >
< tête >
< méta jeu de caractères = 'utf-8' >
< méta nom = 'portée d'affichage' contenu = 'largeur=largeur de l'appareil, échelle initiale=1' >
< titre >< / titre >
< scénario src = 'https://cdn.tailwindcss.com' >< / scénario >
< / tête >
< corps >
< h1 identifiant = 'température' >C'est un indice Linux< / h1 >
< / corps >
< / HTML >
< style taper = 'texte/css' >
#température {
décoration de texte : souligner ;
texte- aligner : centre;
}
@ médias ( max- largeur :550px ) {
#température {
épaisseur de décoration du texte : 4 px ;
} }
< / style >
Dans ce bloc de code, considérez les méthodologies fournies ci-dessous :
- De même, incluez le chemin CDN.
- Ensuite, ajoutez un « < h1 > » ayant l’élément « id » indiqué.
- Dans la partie CSS du code, à l'intérieur du « < style > », stylisez le titre inclus.
- Créez également le « @ médias ' règle qui applique une condition telle que tant que la largeur de l'écran est ' 550px ', l'épaisseur de la décoration du texte est définie sur ' 4 'pixels.
- C’est tel qu’une fois que la largeur de l’écran dépasse cette limite, le texte sera simplement souligné.
Sortir
Ce résultat signifie que la règle « @media », c'est-à-dire les requêtes multimédias, est appliquée en fonction de la largeur de l'écran.
Conclusion
Les points d'arrêt et les requêtes multimédias peuvent être appliqués avec une épaisseur de décoration de texte pour afficher les fonctionnalités appliquées en fonction de la taille de l'écran de l'utilisateur en utilisant diverses classes telles que « md', 'lg » ou via le « @ médias » règle, respectivement. Cette dernière approche est précisée dans le « CSS ' code qui invoque l'élément cible et le décore en fonction du paramètre/condition défini. Ce guide a expliqué comment appliquer l'épaisseur de la décoration de texte avec Tailwind Breakpoint et Media Queries.