Comment puis-je m'assurer que mon site Web s'affiche parfaitement sur une variété de tailles d'écran ?
P粉006540600
2023-08-27 08:55:57
<p>J'essaie de comprendre TailwindCSS et j'essaie actuellement de créer une carte d'employé <strong>responsive</strong>. Mais le problème que j'ai récemment est que mes cartes réagissent à tous les points d'arrêt dans Tailwind, mais uniquement lorsque la hauteur est de 900. </strong>Chaque fois que j'augmente la hauteur, il y a plus d'espace en bas, et lorsque je réduis la hauteur de la fenêtre, le contenu déborde. </p>
<p><strong>Comment puis-je l'adapter à toutes les hauteurs et largeurs ? </strong></p>
<p>[<strong>Fonctionne parfaitement uniquement si la hauteur est de 900 et dans la largeur du point d'arrêt du vent arrière</strong>]</p><p>
Ceci est un aperçu en direct</p><p>
Il s'agit du code du dépôt Github</p>
<p>Code -</p>
<pre class="brush:php;toolbar:false;"><body class="flex justifier-centre éléments-centre h-écran w-full">
<div class="conteneur principal bg-slate-500 min-h-3/6 w-8/12 sm:w-8/12 sm:min-h-3/6 md:w-7/12 md:min-h-2,5/6 lg:w-5/12 lg:min-h-2,5/6 xl:w-4/12 xl:min-h-2,5/6 2xl:w-3,5/12 2xl: min-h-4/6 flex justifier-centre articles-centre py-20">
<div class="conteneur bg-slate-200 w-8/12 h-4/6 flex flex-col arrondi-lg">
<div class="title py-4 px-5 font-bold">Voici le titre de la carte</div>
<div class="grille de date de révision grille-cols-2 bg-blanc w-full h-1/6 éléments-centre p-2 px-4 centre-texte">
<div class="review flex justifier-centre éléments-centre texte-xs bg-orange-700 texte-blanc police-semibold p-1 sm:w-10/12 sm:py-1 sélection majuscule arrondie-complète- aucun">
À L'ÉTUDE
</div>
<div class="date flex justifier-fin éléments-centre texte-xs font-semibold select-none">
14 mai 1988
</div>
</div>
<div class="commentaire bg-white border-t border-slate-100 w-full">
<p class="commentdata bg-slate-200 text-left text-sm p-3 m-4 round-lg select-none"> Ceci est un court commentaire sur cet employé. </p>
</div>
<div class="employeedata px-4 pt-2 pb-4">
<div class="employé majuscule">
<label class="text-xs font-bold text-slate-600">Employé</label>
</div>
<div class="employeebar flex mt-2">
<div class="logo-employé bg-sky-800 texte-blanc texte-xs police-bold w-10 h-10 arrondi-plein flex justifier-centre éléments-centre">VG</div>
<div class="employee-info flex flex-col ml-4">
<div class="nom-de-l'employé text-sm font-bold flex pb-0.5">Mohammad Mustak</div>
<div class="employee-title text-xs text-slate-600">Développeur Web</div>
</div>
</div>
</div>
</div>
</div>
</body></pre></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Déclarez
width、height、paddingetc en utilisant le code suivant :Unités de fenêtre
vwvhvminvmaxPuis, si besoin :
Petite unité de fenêtre
svwsvhGrande unité de fenêtre
lvwlvhUnités de fenêtre d'affichage dynamique
dvwdvhLectures complémentaires :
Utilisez la hauteur minimale pour résoudre le problème du conteneur principal.