ในขณะที่ออกแบบเว็บไซต์แบบตอบสนอง Tailwind “ เบรกพอยท์ ' และ ' สื่อสอบถาม ” มีบทบาทสำคัญในการนำฟังก์ชันหลากหลายมาปรับใช้กับหน้าจอขนาดต่างๆ ได้อย่างสะดวก คุณสมบัติเหล่านี้จะถูกระบุผ่านคลาสต่างๆ เช่น “ md (หน้าจอขนาดกลาง)”, “lg (หน้าจอขนาดใหญ่)” หรือผ่านทาง “@media ” กฎที่ผนวกฟังก์ชันการทำงานตามเงื่อนไขที่ระบุ
บทความนี้ครอบคลุมเนื้อหาต่อไปนี้:
- จะใช้ความหนาของการตกแต่งข้อความด้วยเบรกพอยต์ Tailwind และการสืบค้นสื่อได้อย่างไร
- การใช้ความหนาของการตกแต่งข้อความด้วยเบรกพอยต์ลมท้าย
- การใช้ความหนาของการตกแต่งข้อความกับการสืบค้นสื่อแบบ Tailwind
จะใช้ความหนาของการตกแต่งข้อความด้วยเบรกพอยต์ Tailwind และการสืบค้นสื่อได้อย่างไร
“ ความหนาของการตกแต่งข้อความ ” สามารถนำไปใช้ได้ด้วยความช่วยเหลือของ “ การตกแต่งข้อความความหนา ” คุณสมบัติตามด้วยค่าความหนาของเป้าหมายในหน่วยพิกเซล พิกเซลเหล่านี้สามารถเป็น “ 1px”, “2px”, “4px” หรือ “8px '. “ เบรกพอยท์ ” ใช้เพื่อปรับฟังก์ชันการใช้งานต่างๆ ให้สอดคล้องกับขนาดหน้าจอของผู้ใช้โดยใช้ปุ่ม “ md (หน้าจอขนาดกลาง)”, “lg (หน้าจอขนาดใหญ่) ” ชั้นเรียน ฯลฯ “ สื่อสอบถาม ” เปิดใช้งานรูปแบบการใช้งานแบบมีเงื่อนไขตามชุดของเบราว์เซอร์และพารามิเตอร์ระบบปฏิบัติการผ่านทาง '@ สื่อ ' กฎ.
ตัวอย่างที่ 1: การใช้ความหนาของการตกแต่งข้อความกับเบรกพอยต์ของลมท้าย
ตัวอย่างนี้ตั้งค่าความหนาของการตกแต่งข้อความที่จุดต่างๆ เพื่อใช้สไตล์ที่แตกต่างกันไปตามขนาดหน้าจอ:
< html >
< ศีรษะ >
< เมตาดาต้า ชุดอักขระ = 'utf-8' >
< เมตาดาต้า ชื่อ = 'วิวพอร์ต' เนื้อหา = 'ความกว้าง=ความกว้างของอุปกรณ์, ขนาดเริ่มต้น=1' >
< ชื่อ >< / ชื่อ >
< สคริปต์ src = 'https://cdn.tailwindcss.com' >< / สคริปต์ >
< / ศีรษะ >
< ร่างกาย >
< พื้นที่ข้อความ ระดับ = 'ขีดเส้นใต้ md:ตกแต่ง-8 lg:กล่องตกแต่ง-ชิ้นข้อความ-ข้อความสีดำ-2xl' รหัส = 'อุณหภูมิ' > นี่คือ Linuxhint < / พื้นที่ข้อความ >
< / ร่างกาย >
< / html >
ตามข้อมูลโค้ดนี้ ให้ใช้ขั้นตอนด้านล่าง:
- ขั้นแรก ให้รวมเส้นทาง CDN เพื่อใช้ฟังก์ชัน Tailwind
- จากนั้นให้สร้าง '< พื้นที่ข้อความ >” และรวมระดับความหนาของการตกแต่งข้อความที่ระบุไว้ในหน้าจอเริ่มต้นและหน้าจอขนาดกลางผ่านปุ่ม “ แพทยศาสตร์ ” คลาสตามลำดับ
- “ ข้อความ-สีดำ ' และ ' ข้อความ-2xl ” คลาสจะจัดสรรสี (สีดำ) และขนาดตัวอักษร เช่น 2xl ให้กับข้อความ ตามลำดับ
เอาท์พุต
จากผลลัพธ์นี้ สามารถบอกเป็นนัยได้ว่าความหนาของการตกแต่งข้อความถูกปรับให้เข้ากับขนาดหน้าจอที่แตกต่างกันอย่างเหมาะสม
ตัวอย่างที่ 2: การใช้ความหนาของการตกแต่งข้อความกับการสืบค้นสื่อ Tailwind
“@ สื่อ กฎ ” ถูกใช้ใน Media Queries เพื่อปรับใช้สไตล์ที่หลากหลายสำหรับประเภทสื่อ/อุปกรณ์ที่แตกต่างกัน การสาธิตนี้ใช้คำสั่งสื่อเหล่านี้ในการตกแต่งความหนาของข้อความตามพารามิเตอร์/เงื่อนไขที่ระบุ:
< html >
< ศีรษะ >
< เมตาดาต้า ชุดอักขระ = 'utf-8' >
< เมตาดาต้า ชื่อ = 'วิวพอร์ต' เนื้อหา = 'ความกว้าง=ความกว้างของอุปกรณ์, ขนาดเริ่มต้น=1' >
< ชื่อ >< / ชื่อ >
< สคริปต์ src = 'https://cdn.tailwindcss.com' >< / สคริปต์ >
< / ศีรษะ >
< ร่างกาย >
< h1 รหัส = 'อุณหภูมิ' >นี่คือ Linuxhint< / h1 >
< / ร่างกาย >
< / html >
< สไตล์ พิมพ์ = 'ข้อความ/ซีเอส' >
#อุณหภูมิ {
การตกแต่งข้อความ: ขีดเส้นใต้;
ข้อความ- จัดตำแหน่ง : ศูนย์;
}
@ สื่อ ( สูงสุด- ความกว้าง :550px ) {
#อุณหภูมิ {
ตกแต่งข้อความความหนา: 4px;
} }
< / สไตล์ >
ในกลุ่มโค้ดนี้ ให้พิจารณาวิธีการด้านล่างนี้:
- ในทำนองเดียวกัน ให้รวมเส้นทาง CDN ด้วย
- จากนั้นให้เพิ่ม “< h1 >” องค์ประกอบที่มีการระบุ “id”
- ในส่วน CSS ของโค้ด ภายในส่วน “< สไตล์ >” แท็ก จัดรูปแบบส่วนหัวที่รวมไว้
- นอกจากนี้ให้สร้าง '@ สื่อ ” ที่ใช้เงื่อนไขตราบเท่าที่ความกว้างของหน้าจอคือ “ 550px ”, กำหนดความหนาการตกแต่งข้อความเป็น “ 4 ” พิกเซล
- เมื่อความกว้างของหน้าจอเกินขีดจำกัดนี้ ข้อความจะถูกขีดเส้นใต้
เอาท์พุต
ผลลัพธ์นี้บ่งบอกว่ามีการใช้กฎ “@media” เช่น Media Queries ตามความกว้างของหน้าจอ
บทสรุป
สามารถใช้ Breakpoints และ Media Queries กับความหนาของการตกแต่งข้อความเพื่อแสดงฟังก์ชันการใช้งานตามขนาดหน้าจอของผู้ใช้โดยใช้คลาสต่างๆ เช่น “ เอ็มดี', 'แอลจี ” หรือผ่านทาง “@ สื่อ ” ตามลำดับ แนวทางหลังระบุไว้ใน “ ซีเอสเอส ” โค้ดที่เรียกใช้องค์ประกอบเป้าหมายและตกแต่งตามพารามิเตอร์/เงื่อนไขที่ตั้งไว้ คู่มือนี้อธิบายอย่างละเอียดเกี่ยวกับการใช้ความหนาของการตกแต่งข้อความด้วย Tailwind Breakpoint และ Media Queries