简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Web サイトがさまざまな画面サイズで完璧に表示されるようにするにはどうすればよいですか?
P粉006540600
P粉006540600 2023-08-27 08:55:57
0
2
497
<p>私は TailwindCSS を理解しようとしており、現在 <strong>レスポンシブな従業員カードを作成しようとしています。しかし、私が最近遭遇した問題は、カードが Tailwind のすべてのブレークポイントで応答するが、高さが 900 の場合にのみ応答するということです。 </strong>高さを増やすと常に下部のスペースが増え、ウィンドウの高さを縮小するとコンテンツがオーバーフローします。 </p> <p><strong>すべての高さと幅に適合させるにはどうすればよいですか? </strong></p> <p>[<strong>高さが 900 で、Tailwind ブレークポイントの幅以内の場合にのみ完全に動作します</p><p> これはライブ プレビューです</p><p> これは Github リポジトリコード</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-colrounded-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-1rounded-full uppercase select-なし」 検討中 </div> <div class="date flex justify-end items-center text-xs font-semibold select-none"> 1988 年 5 月 14 日 </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-4rounded-lg select-none">これは、この従業員に関する短いコメントです。 </p> </div> <div class="従業員データ px-4 pt-2 pb-4"" <div class="従業員の大文字"> <label class="text-xs font-bold text-slate-600">従業員</label> </div> <div class="従業員バー フレックス mt-2"> <div class="employee-logo bg-sky-800 text-white text-xs font-bold w-10 h-10rounded-full flex justify-center items-center">VG</div> <div class="従業員情報 flex flex-col ml-4"" <div class="従業員名 text-sm font-bold flex pb-0.5">Mohammad Mustak</div> <div class="employee-title text-xs text-slate-600">Web 開発者</div> </div> </div> </div> </div> </div> </body></pre></p>
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
＃＃＃ 参考文献： ＃＃＃

MDN の相対長さの単位
いいねを押す +0
返信を追加
P粉098417223
P粉0984172232023-08-28 00:42:05 1棟

main-container の問題を解決するには、minimum height を使用します。 リーリー

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！