简体中文(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
555
<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>
P粉006540600
P粉006540600

모든 응답(2)
P粉680087550
P粉6800875502023-08-28 00:56:46 2층

다음 코드를 사용하여 width、height、paddingetc를 선언하세요.

뷰포트 단위

  • vw
  • vh
  • vmin
  • vmax

그런 다음 필요한 경우:

작은 뷰포트 유닛

  • svw
  • svh

대형 뷰포트 유닛

  • lvw
  • lvh

동적 뷰포트 단위

  • dvw
  • dvh

추가 자료:

좋다 +0
답글 추가
P粉098417223
P粉0984172232023-08-28 00:42:05 1층

최소 높이를 사용하여 주 컨테이너 문제를 해결하세요.

으아악
좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！