Cet article démontrera la méthode pour utiliser le 'break-after' avec des points d'arrêt et des requêtes multimédias dans Tailwind CSS.
Comment utiliser 'break-after' avec les points d'arrêt et les requêtes multimédias dans Tailwind ?
Pour utiliser un 'break-after' avec des points d'arrêt et des requêtes multimédias, définissez différentes valeurs et styles pour différentes tailles d'écran avec l'utilitaire 'break-after' dans le programme HTML. Ensuite, vérifiez la sortie en affichant la page Web HTML.
Explorons la mise en œuvre pratique :
Étape 1 : Utiliser les points d'arrêt et les requêtes multimédias avec l'utilitaire 'break-after'
Créez un programme HTML et spécifiez différentes valeurs et styles pour différentes tailles d'écran avec l'utilitaire 'break-after'. Par exemple, nous avons utilisé le ' Maryland 'point d'arrêt avec le' pause-après-colonne 'l'utilité et le' lg 'point d'arrêt avec le' briser-après-éviter ' utilitaire:
< corps >
< div classe = 'colonnes-2 bg-sarcelle-400' >
< p classe = 'md:break-after-column lg:break-after-avoid' > Bonjour... < / p >
< p > Bienvenue ici... < / p >
< p > En savoir plus sur Tailwind CSS... < / p >
< p > C'est un cadre CSS... < / p >
< p > Au revoir... < / p >
< / div >
< / corps >
Ici:
- Le ' md:break-after-column ' classe indique qu'un saut de colonne doit se produire après cet élément
spécifique à la ' Maryland ” point d'arrêt (taille d'écran moyenne).
- Le ' lg: break-after-avoid ” classe suggère que l'élément doit éviter le break-after à la “ lg ” point d'arrêt (grande taille d'écran).
Étape 2 : vérifier la sortie
Vérifiez si les points d'arrêt et les requêtes multimédias ont été appliqués en affichant la page Web HTML :
Dans la page Web ci-dessus, le saut de colonne s'est produit sur l'élément spécifié sur l'écran moyen et le saut après a été évité sur le grand écran.
Conclusion
Pour utiliser le 'break-after' avec des points d'arrêt et des requêtes multimédias dans Tailwind, créez d'abord un fichier HTML. Ensuite, utilisez les points d'arrêt et les requêtes multimédias avec l'utilitaire 'break-after' en spécifiant différentes valeurs et styles pour différentes tailles d'écran. Pour vérification, exécutez le programme HTML et affichez la page Web. Cet article a démontré la méthode pour utiliser le 'break-after' avec des points d'arrêt et des requêtes multimédias dans Tailwind CSS.