내 웹사이트가 다양한 화면 크기에서 완벽하게 표시되도록 하려면 어떻게 해야 합니까?
P粉006540600
2023-08-27 08:55:57
<p>저는 TailwindCSS를 이해하려고 노력 중이며 현재 <strong>반응형 직원 카드</strong>를 만들려고 노력 중입니다. 하지만 최근에 겪은 문제는 내 카드가 Tailwind의 모든 중단점에서 반응하지만 높이가 900일 때만 반응한다는 것입니다. 높이를 높이면 아래쪽에 공간이 늘어나고, 창 높이를 낮추면 내용이 넘칩니다. </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="메인 컨테이너 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="컨테이너 bg-slate-200 w-8/12 h-4/6 flex flex-col rounded-lg">
<div class="title py-4 px-5font-bold">카드 제목은 다음과 같습니다</div>
<div class="검토 날짜 그리드 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 글꼴-semibold p-1 sm:w-10/12 sm:py-1 rounded-full uppercase select- 없음">
검토중
</div>
<div class="date flex justify-end items-center text-xs 글꼴-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-4 rounded-lg select-none">이 직원에 대한 짧은 댓글입니다. </p>
</div>
<div class="employeeddata px-4 pt-2 pb-4">
<div class="직원 대문자">
<label class="text-xsfont-bold text-slate-600">직원</label>
</div>
<div class="employeebar flex mt-2">
<div class="직원-로고 bg-sky-800 text-white text-xsfont-bold w-10 h-10 rounded-full flex justify-center items-center">VG</div>
<div class="employee-info flex flex-col ml-4">
<div class="직원 이름 text-sm 글꼴-bold flex pb-0.5">Mohammad Mustak</div>
<div class="employee-title text-xs text-slate-600">웹 개발자</div>
</div>
</div>
</div>
</div>
</div>
</body></pre></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
다음 코드를 사용하여
width、height、paddingetc를 선언하세요.뷰포트 단위
vwvhvminvmax그런 다음 필요한 경우:
작은 뷰포트 유닛
svwsvh대형 뷰포트 유닛
lvwlvh동적 뷰포트 단위
dvwdvh추가 자료:
최소 높이를 사용하여 주 컨테이너 문제를 해결하세요.
으아악