TIP : การเช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่

[thatsawan]

บทความนี่จะมาเเนะนำการใช้งานเครื่องมือช่วยสำหรับพัฒนาเเละการปรับแต่ง CSS บน Firefox กันอีกครั้งนะค่ะ โดยวันนี้เราจะใช้เครื่องมือ "ตรวจดูส่วนประกอบ" เเต่ว่าจะเข้าไปในส่วนเมนูย่อย ที่ชื่อว่า "เครื่องมือแก้ไข สไตล์" เจ้าเครื่องมือนี้จะคล้ายๆ กับ Editor CSS เลย คือมันจะเเสดงไฟล์ CSS ที่ถูกเรียกใช้งาน เราก็สามารถที่จะพิมพ์ Code CSS เข้าไปในนั้นได้เลย ความพิเศษกว่า Editor อื่นๆ ก็คือมันสามารถจะเห็นผลลัพท์ได้ทันที ที่นี่เมื่อมีการแก้ไข เพิ่มเติม เราก็สามารถที่จะ Save เก็บเป็นไฟล์ได้ เเละอีกหนึ่งความพิเศษที่เราจะหยิบยกมาเป็นตัวอย่างวันนี้ก็คือ "การเช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่"

2015-01-09_0-23-14.png (167.52 KiB) Viewed 697 times

ก่อนอื่นเราต้องเปิดใช้งานเครื่องมือ ก่อนนะค่ะเเล้ว เลือกไปที่ เมนู แก้ไข สไตล์

2015-01-09_0-27-25.png (58.29 KiB) Viewed 697 times

ที่นี่ให้เราทำการย่อขนาดหน้าจอการแสดงผลค่ะ ที่เราต้องทำการย่อ ก็เพราะว่าตัวอย่างนี้เราจะเช็คการทำงานของ Responsive (ถ้าจะให้เข้าใจง่ายๆ ก็ประมาณว่าทำให้หน้าเว็บของเราสามารถปรับขนาดให้ใช้งานกับพวก smartphone หรือ Tablet ต่างๆ)

2015-01-09_0-28-00.png (133.2 KiB) Viewed 697 times

เมื่อทำการย่อเเล้ว ให้ทำการคลิกที่ชื่อไฟล์ต่างๆ ที่อยู่ทางด้านซ้ายมือนะค่ะ เเล้วให้เราสังเกตุ ทางด้านขวามือถ้าไฟล์ที่เราทำการคลิกมี กล่อง @media ขึ้นมาแสดงว่าไฟล์นี้แหละที่มีการทำงานของ Responsive

2015-01-09_0-30-33.png (85.37 KiB) Viewed 697 times

ให้ทำการปรับขนาดหน้าจออีกครั้งนะค่ะ

2015-01-09_0-30-50.png (119.34 KiB) Viewed 697 times

กลับมาสังเกตุที่ด้านขวามืออีกครั้ง จะเห็นว่าขนาดหน้าจอที่เราปรับๆ มีการทำงานของ Class CSS ใหนอยู่บ้าง

* สามารถใช้งานโหมดการออกแบบเชิงตอบสนองเเทนการ ปรับขนาดหน้าจอได้นะค่ะ *