recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment puis-je m'assurer que mon site Web s'affiche parfaitement sur une variété de tailles d'écran ?

<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>
P粉006540600P粉006540600445 Il y a quelques jours560

répondre à tous(2)je répondrai

  • P粉680087550

    P粉6800875502023-08-28 00:56:46

    Déclarez widthheightpaddingetc en utilisant le code suivant :

    Unités de fenêtre

    • vw
    • vh
    • vmin
    • vmax

    Puis, si besoin :

    Petite unité de fenêtre

    • svw
    • svh

    Grande unité de fenêtre

    • lvw
    • lvh

    Unités de fenêtre d'affichage dynamique

    • dvw
    • dvh

    Lectures complémentaires :

    répondre
    0
  • P粉098417223

    P粉0984172232023-08-28 00:42:05

    Utilisez la hauteur minimale pour résoudre le problème du conteneur principal.

    <div class="main-container 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 justify-center items-center py-20">

    répondre
    0
  • Annulerrépondre