Bài viết này sẽ cung cấp quy trình áp dụng chiều cao tối thiểu và chiều cao tối đa cho các điểm dừng Tailwind và truy vấn phương tiện bằng cách sử dụng phác thảo sau:
- Đặt thuộc tính chiều cao tối thiểu trên Điểm dừng Tailwind & Truy vấn phương tiện
- Đặt thuộc tính chiều cao tối đa trên Điểm dừng Tailwind & Truy vấn phương tiện
Làm cách nào để đặt thuộc tính chiều cao tối thiểu trên các truy vấn phương tiện và điểm dừng của Tailwind?
Tailwind cung cấp các điểm dừng mặc định và truy vấn phương tiện để giúp thiết kế phản hồi nhanh chóng với các kích thước màn hình khác nhau. Các thuộc tính được cung cấp cho điểm ngắt sẽ được áp dụng khi đáp ứng được kích thước màn hình đã chỉ định. Độ rộng tối thiểu cho các điểm dừng mặc định này được mô tả như sau:
- nhắn tin: Chiều rộng tối thiểu là “640px”.
- md: Chiều rộng tối thiểu là “768px”.
- lg: Chiều rộng tối thiểu là “1024px”.
- xl: Chiều rộng tối thiểu là “1280px”.
- 2xl: Chiều rộng tối thiểu là “1536px”.
Thuộc tính min-height đặt giới hạn dưới cho chiều cao của một phần tử. Điều này có nghĩa là nó chỉ định chiều cao tối thiểu mà một phần tử được phép sở hữu. Để sử dụng thuộc tính min-height với các điểm ngắt trong Tailwind, hãy sử dụng cú pháp sau:
< div lớp học = '{tiền tố điểm dừng}:min-h-{value}...' > < / div >
Hãy sử dụng cú pháp được xác định ở trên trong phần trình diễn để hiểu rõ hơn. Trong ví dụ này, giới hạn chiều cao tối thiểu cho phần tử sẽ tăng lên trên “ md “điểm dừng. Điều này sẽ dẫn đến việc tăng chiều cao tổng thể của phần tử.
< div lớp học = 'h-48 w-48 round-md bg-green-500 trung tâm văn bản md:min-h-screen' > Tăng màn hình Kích cỡ để Tăng chiều cao tối thiểu< / div >
Giải thích cho đoạn mã trên như sau:
- Các ' h-48 ” Lớp cung cấp chiều cao 192px cho phần tử div.
- Các ' w-48 ” Lớp cung cấp chiều cao 192px cho phần tử div.
- Các ' làm tròn-md ” Lớp cung cấp góc tròn cho phần tử div.
- Các ' bg-{color}-{number} ” Lớp cung cấp màu được chỉ định cho nền của phần tử div.
- Các ' trung tâm văn bản ” lớp định vị phần tử văn bản vào giữa phần tử div.
- Các ' md: màn hình tối thiểu ” class sẽ tăng giới hạn chiều cao tối thiểu bằng 100% chiều cao màn hình.
Đầu ra:
Có thể thấy ở đầu ra rằng khi “ md ” kích thước màn hình được đáp ứng, phần tử sẽ nhận được 100% chiều cao màn hình. Điều này xảy ra vì giới hạn chiều cao tối thiểu cho “ md ” breakpoint được đặt bằng chiều cao màn hình:
Làm cách nào để đặt thuộc tính chiều cao tối đa trên các truy vấn phương tiện và điểm dừng của Tailwind?
Lớp chiều cao tối đa đặt giới hạn trên cho thuộc tính chiều cao trong Tailwind. Điều này có nghĩa là nó chỉ định chiều cao tối đa mà một phần tử có thể sở hữu. Cú pháp sử dụng lớp chiều cao tối thiểu với các điểm dừng như sau:
< div lớp học = '{tiền tố điểm dừng}:max-h-{size}...' > < / div >Hãy sử dụng cú pháp được xác định ở trên trong phần trình diễn để hiểu rõ hơn. Trong ví dụ này, phần tử sẽ được cung cấp giới hạn chiều cao tối đa cụ thể cho “ md “điểm dừng. Điều này sẽ thu hẹp chiều cao mặc định được cung cấp cho phần tử.
< div lớp học = 'h-96 w-48 round-md bg-green-500 trung tâm văn bản md:max-h-60' > Tăng màn hình Kích cỡ để Tăng chiều cao tối thiểu< / div >Lưu ý rằng trong đoạn mã trên, chiều cao mặc định của một phần tử được cung cấp bằng “h-96” tức là 384px. Tuy nhiên, chiều cao này thu hẹp xuống “240px” khi đạt đến điểm dừng “md”. Điều này là do “ md:max-h-60 ' lớp học.
Đầu ra:
Ở kết quả đầu ra bên dưới, có thể thấy rõ rằng khi kích thước màn hình đạt đến mức “ md ” điểm dừng, chiều cao phần tử của phần tử sẽ nhỏ hơn.
Đó là tất cả về việc thiết lập thuộc tính chiều cao tối thiểu và tối đa với các điểm dừng Tailwind.
Phần kết luận
Để đặt thuộc tính chiều cao tối đa với các điểm dừng Tailwind và truy vấn phương tiện, hãy dùng lệnh “ {tiền tố điểm dừng}:max-h-{size} ” lớp được sử dụng. Tương tự, để đặt thuộc tính chiều cao tối thiểu với các điểm dừng Tailwind, “ {tiền tố điểm dừng}:min-h-{size} ” lớp được sử dụng. Bài viết này đã cung cấp quy trình áp dụng các thuộc tính chiều cao tối thiểu và tối đa cho các điểm ngắt và truy vấn phương tiện trong Tailwind.