บทความนี่จะมาเเนะนำการใช้งานเครื่องมือช่วยสำหรับพัฒนาเเละการปรับแต่ง CSS บน Firefox กันอีกครั้งนะค่ะ โดยวันนี้เราจะใช้เครื่องมือ "ตรวจดูส่วนประกอบ" เเต่ว่าจะเข้าไปในส่วนเมนูย่อย ที่ชื่อว่า "เครื่องมือแก้ไข สไตล์" เจ้าเครื่องมือนี้จะคล้ายๆ กับ Editor CSS เลย คือมันจะเเสดงไฟล์ CSS ที่ถูกเรียกใช้งาน เราก็สามารถที่จะพิมพ์ Code CSS เข้าไปในนั้นได้เลย ความพิเศษกว่า Editor อื่นๆ ก็คือมันสามารถจะเห็นผลลัพท์ได้ทันที ที่นี่เมื่อมีการแก้ไข เพิ่มเติม เราก็สามารถที่จะ Save เก็บเป็นไฟล์ได้ เเละอีกหนึ่งความพิเศษที่เราจะหยิบยกมาเป็นตัวอย่างวันนี้ก็คือ "การเช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่"
ก่อนอื่นเราต้องเปิดใช้งานเครื่องมือ ก่อนนะค่ะเเล้ว เลือกไปที่ เมนู แก้ไข สไตล์
ที่นี่ให้เราทำการย่อขนาดหน้าจอการแสดงผลค่ะ ที่เราต้องทำการย่อ ก็เพราะว่าตัวอย่างนี้เราจะเช็คการทำงานของ Responsive (ถ้าจะให้เข้าใจง่ายๆ ก็ประมาณว่าทำให้หน้าเว็บของเราสามารถปรับขนาดให้ใช้งานกับพวก smartphone หรือ Tablet ต่างๆ)
เมื่อทำการย่อเเล้ว ให้ทำการคลิกที่ชื่อไฟล์ต่างๆ ที่อยู่ทางด้านซ้ายมือนะค่ะ เเล้วให้เราสังเกตุ ทางด้านขวามือถ้าไฟล์ที่เราทำการคลิกมี กล่อง @media ขึ้นมาแสดงว่าไฟล์นี้แหละที่มีการทำงานของ Responsive
ให้ทำการปรับขนาดหน้าจออีกครั้งนะค่ะ
กลับมาสังเกตุที่ด้านขวามืออีกครั้ง จะเห็นว่าขนาดหน้าจอที่เราปรับๆ มีการทำงานของ Class CSS ใหนอยู่บ้าง
* สามารถใช้งานโหมดการออกแบบเชิงตอบสนองเเทนการ ปรับขนาดหน้าจอได้นะค่ะ *
TIP : การเช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่
Moderators: mindphp, ผู้ดูแลกระดาน
- thatsawan
- PHP VIP Members
- Posts: 27923
- Joined: 31/03/2014 10:02 am
- Contact:
-
- Similar Topics
- Replies
- Views
- Last post
-
-
class table-responsive สามารถเลือนดูตารางที่มีข้อมูลยาว ๆ ในจอเล็ก
by jamepiyawat » 10/08/2019 5:07 pm » in Booststap Knowledge - 0 Replies
- 1457 Views
-
Last post by jamepiyawat
10/08/2019 5:07 pm
-
-
-
CSS3:การใช้งาน @media screen กำหนดคุณสมบัติ Class แบบ responsive
by thatsawan » 18/01/2015 12:18 pm » in CSS Knowledge - 0 Replies
- 1905 Views
-
Last post by thatsawan
18/01/2015 12:18 pm
-
-
-
nav menu ไม่เป็น responsive จะทำให้เป็น responsive ทำยังไงครับ
by Before Dong » 22/07/2017 4:16 pm » in Joomla Development - 2 Replies
- 1198 Views
-
Last post by Before Dong
22/07/2017 6:53 pm
-
-
-
ผมเปลี่ยนคำสั่ง css ใน class แล้วแต่ class นั้นกลับไปใช้คำสั่งเดิมไม่ยอยให้คำสั่งใหม่ที่ Overrides ไปครับ
by jamepiyawat » 05/09/2019 3:11 pm » in HTML CSS - 2 Replies
- 677 Views
-
Last post by jamepiyawat
05/09/2019 3:26 pm
-
-
- 0 Replies
- 623 Views
-
Last post by Ittichai_chupol
21/11/2019 6:39 pm
-
- 0 Replies
- 546 Views
-
Last post by Patipat
05/08/2019 11:10 am
-
-
ดูนี้ให้หน่อยคับ C++ Base Class และ Devrived Class
by Unis » 11/03/2012 10:18 pm » in Programming - C/C++ & java & Python - 0 Replies
- 1711 Views
-
Last post by Unis
11/03/2012 10:18 pm
-
Who is online
Users browsing this forum: Google Adsense [Bot] and 2 guests