简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何確保我的網站在各種螢幕尺寸下完美展示？
P粉006540600
P粉006540600 2023-08-27 08:55:57
0
2
559
<p>我正在嘗試理解TailwindCSS，目前正在嘗試製作<strong>響應式員工卡</strong>。但我最近遇到的問題是，我的卡片在Tailwind的所有斷點上都是響應式的，但<strong>只有當高度為900時。 </strong>每當我增加高度時，底部會有更多空間，而當我縮小視窗高度時，內容會溢出。 </p> <p><strong>如何使其適應所有高度和寬度？ </strong></p> <p>[<strong>只有當高度為900且在Tailwind斷點寬度範圍內時才能完美工作</strong>]</p><p> 這是現場預覽</p><p> 這是Github Repo-Code</p> <p>代碼 -</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: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"> <div class="container bg-slate-200 w-8/12 h-4/6 flex flex-col rounded-lg"> <div class="title py-4 px-5 font-bold">這裡是卡片的標題</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- none"> UNDER REVIEW </div> <div class="date flex justify-end items-center text-xs font-semibold select-none"> May 14, 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 rounded-lg select-none">這是關於這位員工的簡短評論。 </p> </div> <div class="employeedata px-4 pt-2 pb-4"> <div class="employee uppercase"> <label class="text-xs font-bold text-slate-600">員工</label> </div> <div class="employeebar flex mt-2"> <div class="員工標誌 bg-sky-800 text-white text-xs font-bold w-10 h-10 rounded-full flex justify-center items-center>VG</div> <div class="employee-info flex flex-col ml-4">
Mohammad Mustak
Web 開發人員
</body></pre></p>
2
0
0
P粉006540600
P粉006540600

全部回覆(2)
P粉680087550
P粉6800875502023-08-28 00:56:46 2樓

使用以下程式碼宣告width、height、padding等：

視窗單位

  • #vw
  • #vh
  • #vmin
  • vmax

然後，如果需要：

小視窗單位

  • #svw
  • #svh

#大視窗單位

  • #lvw
  • lvh

動態視窗單位

  • #dvw
  • #dvh

#進一步閱讀：

點贊 +0
新增回覆
P粉098417223
P粉0984172232023-08-28 00:42:05 1樓

使用最小高度來解決main-container的問題。 

<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">
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！