Bagaimanakah saya boleh memastikan tapak web saya dipaparkan dengan sempurna pada pelbagai saiz skrin?
P粉006540600
2023-08-27 08:55:57
<p>Saya cuba memahami TailwindCSS dan sedang cuba membuat <strong>kad pekerja responsif</strong>. Tetapi masalah yang saya hadapi baru-baru ini ialah kad saya responsif pada semua titik putus di Tailwind, tetapi hanya apabila ketinggiannya ialah 900. </strong>Setiap kali saya meningkatkan ketinggian, terdapat lebih banyak ruang di bahagian bawah, dan apabila saya mengecilkan ketinggian tetingkap, kandungan melimpah. </p>
<p><strong>Bagaimanakah saya boleh menjadikannya sesuai dengan semua ketinggian dan lebar? </strong></p>
<p>[<strong>Berfungsi dengan sempurna hanya jika ketinggian ialah 900 dan dalam lebar titik putus Tailwind</strong>]</p><p>
Ini ialah pratonton langsung</p><p>
Ini ialah Github Repo-Code</p>
<p>Kod -</p>
<pre class="brush:php;toolbar:false;"><body class="flex justify-center items-center h-screen w-full">
<kelas div="bekas utama 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 item-center py-20">
<div class="bekas bg-slate-200 w-8/12 h-4/6 flex flex-col rounded-lg">
<div class="tajuk py-4 px-5 font-bold">Berikut ialah tajuk kad</div>
<div class="semak-tarikh grid grid-cols-2 bg-putih w-penuh h-1/6 item-pusat p-2 px-4 teks-pusat">
<div class="semak flex justify-center items-center text-xs bg-oren-700 text-white font-semibold p-1 sm:w-10/12 sm:py-1 bulat-huruf besar penuh pilih- tiada">
DITINJAU
</div>
<div class="tarikh flex justify-end item-center text-xs font-semibold pilih-none">
14 Mei 1988
</div>
</div>
<div class="komen bg-sempadan putih-t sempadan-slate-100 w-penuh">
<p class="commentdata bg-slate-200 text-left text-sm p-3 m-4 rounded-lg select-none">Ini adalah ulasan ringkas tentang pekerja ini. </p>
</div>
<div class="employeedata px-4 pt-2 pb-4">
<div class="huruf besar pekerja">
<kelas label="teks-xs font-bold text-slate-600">Pekerja</label>
</div>
<div class="lentur bar pekerja mt-2">
<div class="logo pekerja bg-sky-800 text-white text-xs font-bold w-10 h-10 rounded-full flex justify-center item-center">VG</div>
<div class="maklumat-pekerja flex-col ml-4">
<div class="nama pekerja teks-sm font-bold flex pb-0.5">Mohammad Mustak</div>
<div class="teks tajuk pekerja-xs text-slate-600">Pembangun Web</div>
</div>
</div>
</div>
</div>
</div>
</body></pre></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Isytiharkan
width、height、paddingdll menggunakan kod berikut:Unit viewport
vwvhvminvmaxKemudian, jika perlu:
Unit pandangan kecil
svwsvhUnit pandangan pandang besar
lvwlvhUnit paparan dinamik
dvwdvhBacaan lanjut:
Gunakan tinggi minimum untuk menyelesaikan masalah bekas utama.