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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 19835
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan » 10/01/2015 5:35 am

บทความนี่จะมาเเนะนำการใช้งานเครื่องมือช่วยสำหรับพัฒนาเเละการปรับแต่ง CSS บน Firefox กันอีกครั้งนะค่ะ โดยวันนี้เราจะใช้เครื่องมือ "ตรวจดูส่วนประกอบ" เเต่ว่าจะเข้าไปในส่วนเมนูย่อย ที่ชื่อว่า "เครื่องมือแก้ไข สไตล์" เจ้าเครื่องมือนี้จะคล้ายๆ กับ Editor CSS เลย คือมันจะเเสดงไฟล์ CSS ที่ถูกเรียกใช้งาน เราก็สามารถที่จะพิมพ์ Code CSS เข้าไปในนั้นได้เลย ความพิเศษกว่า Editor อื่นๆ ก็คือมันสามารถจะเห็นผลลัพท์ได้ทันที ที่นี่เมื่อมีการแก้ไข เพิ่มเติม เราก็สามารถที่จะ Save เก็บเป็นไฟล์ได้ เเละอีกหนึ่งความพิเศษที่เราจะหยิบยกมาเป็นตัวอย่างวันนี้ก็คือ "การเช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่"
2015-01-09_0-23-14.png
2015-01-09_0-23-14.png (167.52 KiB) Viewed 611 times
ก่อนอื่นเราต้องเปิดใช้งานเครื่องมือ ก่อนนะค่ะเเล้ว เลือกไปที่ เมนู แก้ไข สไตล์
2015-01-09_0-27-25.png
2015-01-09_0-27-25.png (58.29 KiB) Viewed 611 times
ที่นี่ให้เราทำการย่อขนาดหน้าจอการแสดงผลค่ะ ที่เราต้องทำการย่อ ก็เพราะว่าตัวอย่างนี้เราจะเช็คการทำงานของ Responsive (ถ้าจะให้เข้าใจง่ายๆ ก็ประมาณว่าทำให้หน้าเว็บของเราสามารถปรับขนาดให้ใช้งานกับพวก smartphone หรือ Tablet ต่างๆ)
2015-01-09_0-28-00.png
2015-01-09_0-28-00.png (133.2 KiB) Viewed 611 times
เมื่อทำการย่อเเล้ว ให้ทำการคลิกที่ชื่อไฟล์ต่างๆ ที่อยู่ทางด้านซ้ายมือนะค่ะ เเล้วให้เราสังเกตุ ทางด้านขวามือถ้าไฟล์ที่เราทำการคลิกมี กล่อง @media ขึ้นมาแสดงว่าไฟล์นี้แหละที่มีการทำงานของ Responsive
2015-01-09_0-30-33.png
2015-01-09_0-30-33.png (85.37 KiB) Viewed 611 times
ให้ทำการปรับขนาดหน้าจออีกครั้งนะค่ะ
2015-01-09_0-30-50.png
2015-01-09_0-30-50.png (119.34 KiB) Viewed 611 times
กลับมาสังเกตุที่ด้านขวามืออีกครั้ง จะเห็นว่าขนาดหน้าจอที่เราปรับๆ มีการทำงานของ Class CSS ใหนอยู่บ้าง

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

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 2 guests