บทความนี้จะอธิบายวิธีใช้เบรกพอยต์และคิวรีสื่อร่วมกับคุณสมบัติตำแหน่งใน Tailwind
วิธีใช้เบรกพอยต์และการสืบค้นสื่อด้วยคุณสมบัติตำแหน่ง
เบรกพอยต์เป็นบล็อกหลักสำหรับการสร้างการออกแบบที่ตอบสนองขั้นสูงสุด ใช้เพื่อทำให้เค้าโครงสามารถปรับให้เข้ากับขนาดหน้าจอที่แตกต่างกันได้ ข้อความค้นหาสื่อใช้เพื่อนำสไตล์ที่ระบุไปใช้กับองค์ประกอบต่างๆ โดยขึ้นอยู่กับความละเอียดของหน้าจอ สามารถใช้แอตทริบิวต์ตำแหน่งร่วมกับแอตทริบิวต์เหล่านี้เพื่อทำให้เอาต์พุตมีการปรับให้เหมาะสมยิ่งขึ้น
ขั้นตอนที่ 1: การใช้คุณสมบัติตำแหน่งกับเบรกพอยต์และการสืบค้นสื่อ
ในขั้นตอนนี้ โปรแกรมจะถูกแทรกเพื่อใช้คุณสมบัติตำแหน่งตามเบรกพอยท์หรือคิวรีสื่อเหนือตัวเลือก “ พี ' องค์ประกอบ:
< ร่างกาย ระดับ = 'บีจี-สเลท-500' >
< กอง ระดับ = 'ข้อความ-เหลือง-300 p-4 lg:p-8' >
< พี ระดับ = 'relative md:absolute md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > ข้อความนี้จะมีขนาดตัวอักษรที่แตกต่างกันไปตามขนาดหน้าจอ มันจะเล็กลงบนหน้าจอขนาดเล็ก, ขนาดกลางบนหน้าจอขนาดกลาง และใหญ่กว่าบนหน้าจอขนาดใหญ่ < / พี >
< / กอง >
< / ร่างกาย >
ในรหัสนี้:
- “ บีจี-สเลท-500 ” ตั้งค่าสีพื้นหลังเป็นสีเทา
- “ ข้อความ-เหลือง-300 ” เปลี่ยนสีข้อความเป็นสีเหลือง
- “ หน้า-4 ” เพิ่มช่องว่างภายใน 4px
- “ แอลจี: p-8' เพิ่มช่องว่างภายใน 8px บนหน้าจอขนาดใหญ่
- ตำแหน่งเริ่มต้นถูกตั้งค่าให้สัมพันธ์กับเพจหลักโดยใช้เครื่องหมาย “ ญาติ ' ระดับ.
- “ md:ข้อความ-lg ” ทำให้ข้อความมีขนาดใหญ่บนหน้าจอขนาดกลาง
- “เอ็มดี:สัมบูรณ์” ปรับเปลี่ยนตำแหน่งของข้อความจากสัมพัทธ์เป็นสัมบูรณ์บนหน้าจอขนาดกลาง
- “ md: แปล-x-4” และ “md: แปล-y-4” ย้ายข้อความ 4px ลงและไปทางขวาบนขนาดหน้าจอขนาดกลาง
- “ lg:ข้อความ-xl ” เปลี่ยนขนาดข้อความเป็นใหญ่พิเศษบนหน้าจอขนาดใหญ่
- “ lg: คงที่ ” เปลี่ยนตำแหน่งของข้อความที่เกี่ยวข้องกับเพจหลักจากสัมบูรณ์เป็นคงที่บนหน้าจอขนาดใหญ่
- “ lg: แปล-x-4 ' และ ' lg:แปล-y-4 ” ย้ายข้อความ 4px ลงและไปทางขวาบนขนาดหน้าจอขนาดใหญ่
ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
ดูตัวอย่างหน้าเว็บที่สร้างโดยโค้ดด้านบนและปรับขนาดหน้าจอเพื่อดูการเปลี่ยนแปลงดังนี้:
จะเห็นได้ว่าข้อความแสดงพฤติกรรมตอบสนองบนหน้าจอขนาดกลางและขนาดใหญ่
บทสรุป
หากต้องการใช้เบรกพอยท์และการสืบค้นสื่อใน Tailwind ให้ใช้เบรกพอยต์และตั้งค่าการสืบค้นสื่อกับเบรกพอยต์แต่ละอัน รวมถึงเปลี่ยนคุณสมบัติตำแหน่งที่เบรกพอยท์ต่างๆ ของหน้าจอด้วย รายละเอียดเริ่มต้นคือ “ เอสเอ็ม , ' แพทยศาสตร์ , ' แอลจี ', และ ' เอ็กแอล '. บล็อกนี้ได้แสดงวิธีใช้เบรกพอยต์และคิวรีสื่อด้วยคุณสมบัติตำแหน่งใน Tailwind