บทความนี้จะอธิบายขั้นตอนการใช้ความสูงขั้นต่ำและความสูงสูงสุดกับเบรกพอยต์ของ Tailwind และการสืบค้นสื่อโดยใช้โครงร่างต่อไปนี้:
- การตั้งค่าคุณสมบัติความสูงขั้นต่ำบนเบรกพอยต์ของ Tailwind และการสืบค้นสื่อ
- การตั้งค่าคุณสมบัติความสูงสูงสุดบนเบรกพอยต์ของ Tailwind และการสืบค้นสื่อ
จะตั้งค่าคุณสมบัติความสูงขั้นต่ำบน Tailwind Breakpoint & Media Queries ได้อย่างไร
Tailwind มอบเบรกพอยต์เริ่มต้นและการสืบค้นสื่อเพื่อทำให้การออกแบบตอบสนองต่อขนาดหน้าจอที่แตกต่างกัน คุณสมบัติที่กำหนดให้กับเบรกพอยต์จะถูกนำไปใช้เมื่อตรงตามขนาดหน้าจอที่ระบุ ความกว้างขั้นต่ำสำหรับเบรกพอยต์เริ่มต้นเหล่านี้อธิบายไว้ดังนี้:
- เอสเอ็ม: ความกว้างขั้นต่ำ “640px”
- แมรี่แลนด์: ความกว้างขั้นต่ำ “768px”
- แอลจี: ความกว้างขั้นต่ำ “1024px”
- เอ็กแอล: ความกว้างขั้นต่ำ “1280px”
- 2xl: ความกว้างขั้นต่ำ “1536px”
คุณสมบัติ min-height กำหนดขีดจำกัดล่างสำหรับความสูงขององค์ประกอบ ซึ่งหมายความว่าจะระบุความสูงขั้นต่ำที่องค์ประกอบได้รับอนุญาตให้มีได้ หากต้องการใช้คุณสมบัติ min-height กับเบรกพอยต์ใน Tailwind จะใช้ไวยากรณ์ต่อไปนี้
< กอง ระดับ = '{คำนำหน้าเบรกพอยต์}:min-h-{value}...' > < / กอง >
ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นในการสาธิตเพื่อทำความเข้าใจให้ดีขึ้น ในตัวอย่างนี้ ขีดจำกัดความสูงขั้นต่ำสำหรับองค์ประกอบจะเพิ่มขึ้นใน ' แพทยศาสตร์ ” เบรกพอยต์ ซึ่งจะส่งผลให้ความสูงโดยรวมขององค์ประกอบเพิ่มขึ้น
< กอง ระดับ = 'h-48 w-48 โค้งมน-md bg-green-500 ศูนย์ข้อความ md:min-h-screen' > เพิ่มหน้าจอ ขนาด เพื่อเพิ่มความสูงขั้นต่ำ< / กอง >
คำอธิบายสำหรับโค้ดข้างต้นมีดังนี้:
- “ เอช-48 ” คลาสมีความสูง 192px ให้กับองค์ประกอบ div
- “ w-48 ” คลาสมีความสูง 192px ให้กับองค์ประกอบ div
- “ โค้งมน-md ” คลาสให้มุมโค้งมนให้กับองค์ประกอบ div
- “ bg-{สี}-{จำนวน} ” คลาสให้สีที่ระบุให้กับพื้นหลังขององค์ประกอบ div
- “ ศูนย์ข้อความ ” คลาสวางตำแหน่งองค์ประกอบข้อความไว้ที่กึ่งกลางขององค์ประกอบ div
- “ md:min-h-หน้าจอ ” คลาสจะเพิ่มขีดจำกัดความสูงขั้นต่ำเท่ากับความสูงของหน้าจอ 100%
เอาท์พุท:
จะเห็นได้จากผลลัพธ์ที่ว่าเมื่อ “ แพทยศาสตร์ ” ตรงตามขนาดหน้าจอ องค์ประกอบจะได้รับความสูงหน้าจอ 100% สิ่งนี้เกิดขึ้นเนื่องจากการจำกัดความสูงขั้นต่ำสำหรับ “ แพทยศาสตร์ ” เบรกพอยต์ถูกตั้งค่าเท่ากับความสูงของหน้าจอ:
วิธีการตั้งค่าคุณสมบัติความสูงสูงสุดบน Tailwind Breakpoint & Media Queries
คลาสความสูงสูงสุดจะกำหนดขีดจำกัดบนสำหรับคุณสมบัติความสูงใน Tailwind ซึ่งหมายความว่าจะระบุความสูงสูงสุดที่องค์ประกอบสามารถมีได้ ไวยากรณ์สำหรับการใช้คลาสความสูงขั้นต่ำพร้อมเบรกพอยต์มีดังนี้:
< กอง ระดับ = '{คำนำหน้าเบรกพอยต์}:max-h-{size}...' > < / กอง >ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นในการสาธิตเพื่อทำความเข้าใจให้ดีขึ้น ในตัวอย่างนี้ องค์ประกอบจะได้รับขีดจำกัดความสูงสูงสุดเฉพาะสำหรับ ' แพทยศาสตร์ ” เบรกพอยต์ วิธีนี้จะจำกัดความสูงเริ่มต้นที่ระบุให้กับองค์ประกอบให้แคบลง
< กอง ระดับ = 'h-96 w-48 ปัดเศษ-md bg-green-500 text-center md:max-h-60' > เพิ่มหน้าจอ ขนาด เพื่อเพิ่มความสูงขั้นต่ำ< / กอง >โปรดทราบว่าในโค้ดข้างต้น ความสูงเริ่มต้นขององค์ประกอบจะระบุด้วย 'h-96' เช่น 384px อย่างไรก็ตาม ความสูงนี้จะแคบลงเหลือ “240px” เมื่อถึงจุดพัก “md” ทั้งนี้เนื่องมาจาก “ md:สูงสุด-h-60 ' ระดับ.
เอาท์พุท:
ในเอาท์พุตด้านล่างจะเห็นได้ชัดเจนว่าเมื่อขนาดหน้าจอถึงระดับ “ แพทยศาสตร์ ” เบรกพอยต์ ความสูงขององค์ประกอบองค์ประกอบจะเล็กลง
นั่นคือทั้งหมดที่เกี่ยวกับการตั้งค่าคุณสมบัติความสูงขั้นต่ำและสูงสุดด้วยเบรกพอยต์ของ Tailwind
บทสรุป
หากต้องการตั้งค่าคุณสมบัติความสูงสูงสุดด้วยเบรกพอยต์ Tailwind และคำสั่งสื่อ ให้ทำดังนี้ {คำนำหน้าเบรกพอยต์}:max-h-{size} ” มีการใช้คลาส ในทำนองเดียวกัน หากต้องการตั้งค่าคุณสมบัติความสูงขั้นต่ำด้วยเบรกพอยต์ Tailwind ให้ ' {คำนำหน้าเบรกพอยต์}:min-h-{size} ” มีการใช้คลาส บทความนี้ได้ระบุขั้นตอนการใช้คุณสมบัติขั้นต่ำและความสูงสูงสุดกับเบรกพอยต์และคำสั่งสื่อใน Tailwind