บทความนี้จะแสดงวิธีการใช้เบรกพอยต์ที่ตอบสนองใน Tailwind CSS
วิธีการใช้เบรกพอยต์ตอบสนองใน Tailwind
หากต้องการใช้เบรกพอยต์ที่ปรับเปลี่ยนตามอุปกรณ์ใน Tailwind ให้ใช้ตัวแก้ไขที่ปรับเปลี่ยนตามอุปกรณ์ เช่น “ เอสเอ็ม ”, “ นพ ”, “ แอลจี ”, “ xl ' และ ' 2xl ” กับคลาสอื่นๆ ในโปรแกรม HTML จากนั้น ดูหน้าเว็บ HTML และเปลี่ยนขนาดหน้าจอเพื่อให้แน่ใจว่าเบรกพอยต์ทำงานอย่างถูกต้อง
ขั้นตอนที่ 1: ใช้ตัวปรับเปลี่ยนการตอบสนองในโปรแกรม HTML
สร้างโปรแกรม HTML และใช้ตัวดัดแปลงที่ตอบสนองกับสไตล์ที่ต้องการ ตัวอย่างเช่น เราได้ใช้ ' เอสเอ็ม ”, “ นพ ”, “ แอลจี ”, “ xl ' และ ' 2xl ” ปรับเปลี่ยนการตอบสนอง:
< ร่างกาย >
< แผนก ระดับ = 'h-screen bg-บานเย็น-400 sm:bg-ชมพู-600 md:bg-เขียว-700 lg:bg-ม่วง-500 xl:bg-น้าน-600 2xl:bg-เหลือง-500' >
< h1 ระดับ = 'text-7xl text-white text-center p-20' > คำแนะนำเกี่ยวกับลินุกซ์ < / h1 >
< / แผนก >
< / ร่างกาย >
ที่นี่:
- “ bg-บานเย็น-400 ” คลาสกำหนดสีพื้นหลังของ ถึงบานเย็น
- “ sm:bg-pink-600 ” คลาสใช้สีชมพูกับพื้นหลังสำหรับหน้าจอขนาดเล็ก
- “ md:bg-สีเขียว-700 ” class เปลี่ยนสีพื้นหลังเป็นสีเขียวบนหน้าจอขนาดกลาง
- “ lg:bg-สีม่วง-50 ” class ตั้งค่าสีพื้นหลังเป็นสีม่วงสำหรับหน้าจอขนาดใหญ่
- “ xl:bg-น้าน-600 ” คลาสใช้สีนกเป็ดน้ำกับพื้นหลังสำหรับหน้าจอขนาดใหญ่พิเศษ
- “ 2xl:bg-เหลือง-500 ” class เปลี่ยนสีพื้นหลังเป็นสีเหลืองบนหน้าจอ 2xl
ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
ดูหน้าเว็บ HTML เพื่อตรวจสอบว่าเบรกพอยต์ตอบสนองทำงานอย่างถูกต้องหรือไม่:
ในหน้าเว็บข้างต้น สังเกตได้ว่าสีของหน้าเว็บจะเปลี่ยนไปตามขนาดหน้าจอตามจุดพักที่กำหนด
บทสรุป
หากต้องการใช้เบรกพอยต์ที่ปรับเปลี่ยนตามอุปกรณ์ใน Tailwind ให้ใช้ตัวแก้ไขที่ปรับเปลี่ยนตามอุปกรณ์ เช่น “ เอสเอ็ม ”, “ นพ ”, “ แอลจี ”, “ xl ' และ ' 2xl ” กับคลาสอื่นๆ ในโปรแกรม HTML ตัวดัดแปลงเหล่านี้ใช้เพื่อใช้สไตล์ที่แตกต่างกันกับองค์ประกอบเฉพาะตามขนาดหน้าจอ บทความนี้ได้ยกตัวอย่างวิธีการใช้เบรกพอยต์ที่ปรับเปลี่ยนตามอุปกรณ์ใน Tailwind CSS