Ce blog démontrera le processus d'application de requêtes multimédias et de points d'arrêt à l'aide de l'utilitaire de défilement excessif dans Tailwind.
Comment appliquer des requêtes multimédias et des points d'arrêt avec overscroll dans Tailwind ?
Pour appliquer les points d'arrêt ou son autre nom, media queries lorsqu'il s'agit de CSS avec le ' défilement excessif ' utilitaire. Le programme HTML est créé et applique les différents points d’arrêt” sm ', ' Maryland ' ou ' LG ' avec les classes d'utilitaires appropriées de l'utilitaire ' overscroll '. Il modifie le comportement de défilement des éléments sur différentes tailles d'écran.
Étape 1 : utilisez les points d'arrêt et les requêtes multimédias dans le code HTML
Créez un document HTML et appliquez les points d'arrêt qui sont les tailles d'écran et les requêtes multimédias pour chaque point d'arrêt. Par exemple ' Maryland ' et ' LG ' Les points d'arrêt sont utilisés dans le code ci-dessous pour la taille du texte et un comportement de défilement excessif lui est appliqué :
< corps classe = 'bg-ardoise-500' >
< div classe = 'texte-rouge-900 p-4 lg:p-8' >
< p classe = 'relatif md: absolu md: overscroll-contain md: texte-lg md: traduire-x-4 md: traduire-y-4 lg: overscroll-none lg: texte-xl lg: statique lg: traduire-x-4 lg :traduire-y-4 ' > Ce texte aura des tailles de police différentes en fonction de la taille de l'écran. Il sera plus petit sur les petits écrans , moyen - dimensionné sur les écrans moyens , et plus grand sur les grands écrans. p >
div >
corps >
Dans ce code :
- ' bg-ardoise-500 ' définit la couleur d'arrière-plan sur gris.
- ' texte-rouge-900 » change la couleur du texte en rouge.
- ' p-4 » ajoute un remplissage de 4px.
- ' LG : p-8 » ajoute un padding de 8px sur les grands écrans.
- La position initiale du « La balise ' est définie par rapport à la page parent en utilisant le ' relatif ' classe.
- ' md: absolu ' changez la position du texte de relative à absolue sur un écran de taille moyenne.
- ' md: overscroll-contenir » garantit que le comportement de « défilement excessif » est contenu dans cet élément au lieu d'affecter la page entière lorsque l'écran est de taille moyenne.
- ' md:texte-lg » agrandit le texte sur un écran de taille moyenne.
- ' md: traduire-x-4 ' et ' md: traduire-y-4 « déplacer le texte » 4px ' en bas et à droite sur une taille d'écran moyenne.
- ' lg: overscroll-aucun ' définit le ' défilement excessif ' classez la propriété à aucune sur un écran de grande taille.
- ' lg:texte-xl » modifie la taille du texte en extra-large pour un écran de grande taille.
- ' lg:statique 'change la position du texte par rapport à la page parent d'absolue à statique pour un écran de grande taille
- ' lg: traduire-x-4 ' et ' lg: traduire-y-4 ' Déplacez le texte de 4 pixels vers le bas et vers la droite sur un grand écran.
Étape 2 : prévisualiser la sortie
Maintenant, prévisualisez la page Web créée en exécutant le code HTML ci-dessus et modifiez la taille de l'écran du site HTML pour voir les changements visibles :
Dans l'écran ci-dessus, le ' défilement excessif ' Le comportement est visible et en diminuant la taille de l'écran, on peut voir que la taille du texte change en fonction des requêtes multimédias qui lui sont appliquées.
Conclusion
Pour appliquer les requêtes multimédias et les points d'arrêt avec le ' défilement excessif ', spécifiez les points d'arrêt avec une classe souhaitée à partir de l'utilitaire 'overscroll'. En faisant varier la taille de l'écran, les requêtes multimédias ajustent la sortie de l'écran. Ce blog a démontré le processus d'application des requêtes multimédias et des points d'arrêt avec un comportement de « surdéfilement » dans Tailwind.