Wie stelle ich sicher, dass meine Website auf verschiedenen Bildschirmgrößen perfekt angezeigt wird?
P粉006540600
2023-08-27 08:55:57
<p>Ich versuche TailwindCSS zu verstehen und versuche derzeit, eine <strong>responsive Mitarbeiterkarte</strong> zu erstellen. Aber das Problem, auf das ich kürzlich gestoßen bin, ist, dass meine Karten auf allen Haltepunkten in Tailwind reagieren, aber nur, wenn die Höhe 900 beträgt. </strong>Jedes Mal, wenn ich die Höhe erhöhe, ist unten mehr Platz, und wenn ich die Fensterhöhe verkleinere, läuft der Inhalt über. </p>
<p><strong>Wie stelle ich sicher, dass es für alle Höhen und Breiten geeignet ist? </strong></p>
<p>[<strong>Funktioniert nur einwandfrei, wenn die Höhe 900 beträgt und innerhalb der Breite des Tailwind-Haltepunkts</strong>]</p><p>
Dies ist eine Live-Vorschau</p><p>
Dies ist Github Repo-Code</p>
<p>Code -</p>
<pre class="brush:php;toolbar:false;"><body class="flex justify-center items-center h-screen w-full">
<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:b-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">
<div class="container bg-slate-200 w-8/12 h-4/6 flex flex-colrounded-lg">
<div class="title py-4 px-5 font-bold">Hier ist der Titel der Karte</div>
<div class="review-date grid grid-cols-2 bg-white w-full h-1/6 items-center p-2 px-4 text-center">
<div class="review flex justify-center items-center text-xs bg-orange-700 text-white font-semibold p-1 sm:w-10/12 sm:py-1 Rounded-Full Uppercase Select- keine">
IN ÜBERPRÜFUNG
</div>
<div class="date flex justify-end items-center text-xs font-semibold select-none">
14. Mai 1988
</div>
</div>
<div class="comment bg-white border-t border-slate-100 w-full">
<p class="commentdata bg-slate-200 text-left text-sm p-3 m-4 abgerundet-lg select-none">Dies ist ein kurzer Kommentar zu diesem Mitarbeiter. </p>
</div>
<div class="employeedata px-4 pt-2 pb-4">
<div class="Mitarbeiter-Großbuchstaben">
<label class="text-xs font-bold text-slate-600">Mitarbeiter</label>
</div>
<div class="employeebar flex mt-2">
<div class="employee-logo bg-sky-800 text-white text-xs font-bold w-10 h-10 abgerundet-voller Flex justify-center items-center">VG</div>
<div class="employee-info flex flex-col ml-4">
<div class="Employee-Name Text-SM Font-Bold Flex PB-0.5">Mohammad Mustak</div>
<div class="employee-title text-xs text-slate-600">Web Developer</div>
</div>
</div>
</div>
</div>
</div>
</body></pre></p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
使用以下代码声明
width、height、padding等：视口单位
vwvhvminvmax然后，如果需要：
小视口单位
svwsvh大视口单位
lvwlvh动态视口单位
dvwdvh进一步阅读：
使用最小高度来解决main-container的问题。