이 문서에서는 다음 개요를 사용하여 Tailwind 중단점 및 미디어 쿼리에 최소 높이와 최대 높이를 적용하는 절차를 제공합니다.
Tailwind 중단점 및 미디어 쿼리에서 최소 높이 속성을 설정하는 방법은 무엇입니까?
Tailwind는 다양한 화면 크기에 반응하는 디자인을 만들기 위한 기본 중단점과 미디어 쿼리를 제공합니다. 중단점에 제공되는 속성은 지정된 화면 크기가 충족될 때 적용됩니다. 이러한 기본 중단점의 최소 너비는 다음과 같습니다.
- sm: 최소 너비는 '640px'입니다.
- MD: 최소 너비는 “768px”입니다.
- LG: 최소 너비는 '1024px'입니다.
- 특대: 최소 너비는 '1280px'입니다.
- 2XL: 최소 너비는 '1536px'입니다.
min-height 속성은 요소 높이의 하한을 설정합니다. 이는 요소가 소유할 수 있는 최소 높이를 지정한다는 의미입니다. Tailwind에서 중단점과 함께 min-height 속성을 사용하려면 다음 구문이 사용됩니다.
< div 수업 = '{중단점 접두사}:min-h-{값}...' > < / div >
더 나은 이해를 위해 데모에서 위에 정의된 구문을 사용해 보겠습니다. 이 예에서는 요소의 최소 높이 제한이 ' MD ” 중단점. 이로 인해 요소의 전체 높이가 증가합니다.
< div 수업 = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' > 화면 확대 크기 최소 높이를 높이려면< / div >
위 코드에 대한 설명은 다음과 같습니다.
- “ h-48 ” 클래스는 div 요소에 192px의 높이를 제공합니다.
- “ w-48 ” 클래스는 div 요소에 192px의 높이를 제공합니다.
- “ 반올림-MD ” 클래스는 div 요소에 둥근 모서리를 제공합니다.
- “ bg-{색상}-{번호} ” 클래스는 div 요소의 배경에 지정된 색상을 제공합니다.
- “ 텍스트 센터 ” 클래스는 텍스트 요소를 div 요소의 중앙에 배치합니다.
- “ md:최소-h-화면 ” 클래스는 화면 높이의 100%와 동일하게 최소 높이 제한을 늘립니다.
산출:
출력에서 볼 수 있듯이 ' MD ” 화면 크기가 충족되면 요소는 화면 높이의 100%를 가져옵니다. 이는 '의 최소 높이 제한 때문에 발생합니다. MD ” 중단점은 화면 높이와 동일하게 설정됩니다.
Tailwind 중단점 및 미디어 쿼리에서 최대 높이 속성을 설정하는 방법은 무엇입니까?
최대 높이 클래스는 Tailwind의 높이 속성에 대한 상한을 설정합니다. 이는 요소가 가질 수 있는 최대 높이를 지정한다는 의미입니다. 중단점과 함께 최소 높이 클래스를 사용하는 구문은 다음과 같습니다.
< div 수업 = '{중단점 접두사}:max-h-{크기}...' > < / div >더 나은 이해를 위해 데모에서 위에 정의된 구문을 사용해 보겠습니다. 이 예에서는 요소에 '에 대한 특정 최대 높이 제한이 제공됩니다. MD ” 중단점. 이렇게 하면 요소에 제공되는 기본 높이가 좁아집니다.
< div 수업 = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' > 화면 확대 크기 최소 높이를 높이려면< / div >위 코드에서 요소의 기본 높이는 'h-96', 즉 384px로 제공됩니다. 그러나 'md' 중단점이 충족되면 이 높이는 '240px'로 좁아집니다. 이는 “ md:최대-h-60 ' 수업.
산출:
아래 출력에서 화면 크기가 ' MD ” 중단점을 사용하면 요소의 요소 높이가 작아집니다.
이는 Tailwind 중단점을 사용하여 최소 및 최대 높이 속성을 설정하는 것입니다.
결론
Tailwind 중단점 및 미디어 쿼리를 사용하여 최대 높이 속성을 설정하려면 ' {중단점 접두사}:max-h-{크기} ” 클래스가 사용됩니다. 마찬가지로 Tailwind 중단점을 사용하여 최소 높이 속성을 설정하려면 ' {중단점 접두사}:min-h-{크기} ” 클래스가 사용됩니다. 이 문서에서는 Tailwind의 중단점 및 미디어 쿼리에 최소 및 최대 높이 속성을 적용하는 절차를 제공했습니다.