บทความนี่จะมาเเนะนำการใช้งานเครื่องมือช่วยสำหรับพัฒนาเเละการปรับแต่ง CSS บน Firefox กันอีกครั้งนะค่ะ โดยวันนี้เราจะใช้เครื่องมือ "ตรวจดูส่วนประกอบ" เเต่ว่าจะเข้าไปในส่วนเมนูย่อย ที่ชื่อว่า "เครื่องมือแก้ไข สไตล์" เจ้าเครื่องมือนี้จะคล้ายๆ กับ Editor CSS เลย คือมันจะเเสดงไฟล์ CSS ที่ถูกเรียกใช้งาน เราก็สามารถที่จะพิมพ์ Code CSS เข้าไปในนั้นได้เลย ความพิเศษกว่า Editor อื่นๆ ก็คือมันสามารถจะเห็นผลลัพท์ได้ทันที ที่นี่เมื่อมีการแก้ไข เพิ่มเติม เราก็สามารถที่จะ Save เก็บเป็นไฟล์ได้ เเละอีกหนึ่งความพิเศษที่เราจะหยิบยกมาเป็นตัวอย่างวันนี้ก็คือ "การเช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่"
ก่อนอื่นเราต้องเปิดใช้งานเครื่องมือ ก่อนนะค่ะเเล้ว เลือกไปที่ เมนู แก้ไข สไตล์
ที่นี่ให้เราทำการย่อขนาดหน้าจอการแสดงผลค่ะ ที่เราต้องทำการย่อ ก็เพราะว่าตัวอย่างนี้เราจะเช็คการทำงานของ Responsive (ถ้าจะให้เข้าใจง่ายๆ ก็ประมาณว่าทำให้หน้าเว็บของเราสามารถปรับขนาดให้ใช้งานกับพวก smartphone หรือ Tablet ต่างๆ)
เมื่อทำการย่อเเล้ว ให้ทำการคลิกที่ชื่อไฟล์ต่างๆ ที่อยู่ทางด้านซ้ายมือนะค่ะ เเล้วให้เราสังเกตุ ทางด้านขวามือถ้าไฟล์ที่เราทำการคลิกมี กล่อง @media ขึ้นมาแสดงว่าไฟล์นี้แหละที่มีการทำงานของ Responsive
ให้ทำการปรับขนาดหน้าจออีกครั้งนะค่ะ
กลับมาสังเกตุที่ด้านขวามืออีกครั้ง จะเห็นว่าขนาดหน้าจอที่เราปรับๆ มีการทำงานของ Class CSS ใหนอยู่บ้าง
* สามารถใช้งานโหมดการออกแบบเชิงตอบสนองเเทนการ ปรับขนาดหน้าจอได้นะค่ะ *
TIP : การเช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่
Moderator: mindphp, ผู้ดูแลกระดาน
- thatsawan
- PHP VIP Members
- โพสต์: 28508
- ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
- ติดต่อ:
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ class table-responsive สามารถเลือนดูตารางที่มีข้อมูลยาว ๆ ในจอเล็ก
โดย jamepiyawat » 10/08/2019 5:07 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 4200 แสดง
-
โพสต์ล่าสุด โดย jamepiyawat
10/08/2019 5:07 pm
-
-
-
โพสต์ใหม่ CSS3:การใช้งาน @media screen กำหนดคุณสมบัติ Class แบบ responsive
โดย thatsawan » 18/01/2015 12:18 pm » ใน CSS Knowledge - 0 ตอบกลับ
- 2581 แสดง
-
โพสต์ล่าสุด โดย thatsawan
18/01/2015 12:18 pm
-
-
-
โพสต์ใหม่ nav menu ไม่เป็น responsive จะทำให้เป็น responsive ทำยังไงครับ
โดย Before Dong » 22/07/2017 4:16 pm » ใน Joomla Development - 2 ตอบกลับ
- 2297 แสดง
-
โพสต์ล่าสุด โดย Before Dong
22/07/2017 6:53 pm
-
-
- 2 ตอบกลับ
- 2237 แสดง
-
โพสต์ล่าสุด โดย jamepiyawat
05/09/2019 3:26 pm
-
- 0 ตอบกลับ
- 2309 แสดง
-
โพสต์ล่าสุด โดย Ittichai_chupol
21/11/2019 6:39 pm
-
- 0 ตอบกลับ
- 1925 แสดง
-
โพสต์ล่าสุด โดย Patipat
05/08/2019 11:10 am
-
-
โพสต์ใหม่ วิธีการเรียก class โดยเรียกด้วยคำแค่ส่วนหนึ่งของ class ทั้งหมดใน jquery
โดย ewqolf » 07/02/2023 5:58 pm » ใน jQuery & Ajax Knowledge - 0 ตอบกลับ
- 1277 แสดง
-
โพสต์ล่าสุด โดย ewqolf
07/02/2023 5:58 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 33