TIP: view responsive layouts(ดูผลการแสดงตามขนาดหน้าจอ) ด้วย "Web Develop"


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

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

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

TIP: view responsive layouts(ดูผลการแสดงตามขนาดหน้าจอ) ด้วย "Web Develop"

Post by thatsawan » 11/02/2015 11:40 pm

TIP: view responsive layouts(ดูผลการแสดงตามขนาดหน้าจอ) ด้วย "Web Develop"
ทุกวันนี้การพัฒนาเว็บไซต์เป็นเพียงเเค่เปิดใช้งานผ่านหน้าจอคอมพิวเตอร์เท่านั้น เเต่ต้องมีการพัฒนาให้ทันสมัยเข้าถึงทุกการใช้งานของ User การพัฒนาเว็บไซต์จึงมี คำว่า Responsive Web Design เกิดขึ้นมา ไม่ว่าหน้าจอ Iphone , Tablet, Ipad ต่างๆ นานา การพัฒนา CSS ซึ่งก็ต้องปรับเปลี่ยน Code เพื่อให้ได้รูปแบบตามที่สมควรจะแสดงตามเเต่ของหน้าจอ ที่นี่ปัญหาก็มีอยู่ว่าเราจะทดสอบการแสดงผลได้ยังไงล่ะ ? ถ้าเราไม่มี Iphone , Tablet, Ipad หรือ Smartphone ต่างๆ เเน่นอนค่ะ TIP ของเราวันนี้มีคำตอบ


บทความที่เกี่ยวข้อง
- TIP : การเช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่
- CSS3:การใช้งาน @media screen กำหนดคุณสมบัติ Class แบบ responsive


______________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS ซึ่งเป็นความรู้พื้นฐานในการพัฒนา JavaScrip, JQuery หรือเเม้กระทั้ง Ajax ต่อไป ทั้งนี้สามารถดูรายละเอียด TIP ต่างๆ ได้ที่นี่ค่ะ เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับโดยสามารถศึกษาได้จากบทเรียน CSS ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
______________________________________________________________________________________________


วิธีการทำงานของเครื่องมือ Web Develop เเละการใช้งานคือ
ถ้ายังไม่มีเครื่องมือ Web Develop สามารถดูวิธีการติดตั้งได้จาก https://www.mindphp.com/forums/viewtopic ... 73&t=26058
เมื่อเราเปิดเว็บไซต์ของเราขึ้นมา
TIP: view responsive layouts(ดูผลการแสดงตามขนาดหน้าจอ) ด้วย "Web Develop" 2015-02-11_23-24-41.png
2015-02-11_23-24-41.png (107.43 KiB) Viewed 541 times
จากนั้น คลิกที่เครื่องมือ Resize > view responsive layouts
TIP: view responsive layouts(ดูผลการแสดงตามขนาดหน้าจอ) ด้วย "Web Develop" 2015-02-11_23-26-40.png
2015-02-11_23-26-40.png (110.73 KiB) Viewed 541 times
TIP: view responsive layouts(ดูผลการแสดงตามขนาดหน้าจอ) ด้วย "Web Develop" 2015-02-11_23-27-22.png
2015-02-11_23-27-22.png (107.09 KiB) Viewed 541 times
TIP: view responsive layouts(ดูผลการแสดงตามขนาดหน้าจอ) ด้วย "Web Develop" 2015-02-11_23-27-55.png
2015-02-11_23-27-55.png (66.1 KiB) Viewed 541 times
* ภาพทั้งหมดเป็นเพียงเเค่ตัวอย่างเพียงส่วนเดียวเท่านั้นค่ะ *

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 3 guests