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
เมื่อเราเปิดเว็บไซต์ของเราขึ้นมา
- 2015-02-11_23-24-41.png (107.43 KiB) Viewed 540 times
จากนั้น คลิกที่เครื่องมือ Resize > view responsive layouts
- 2015-02-11_23-26-40.png (110.73 KiB) Viewed 540 times
- 2015-02-11_23-27-22.png (107.09 KiB) Viewed 540 times
- 2015-02-11_23-27-55.png (66.1 KiB) Viewed 540 times
* ภาพทั้งหมดเป็นเพียงเเค่ตัวอย่างเพียงส่วนเดียวเท่านั้นค่ะ *
[color=#0000FF][size=150][b]TIP: view responsive layouts(ดูผลการแสดงตามขนาดหน้าจอ) ด้วย "Web Develop"[/b][/size]
ทุกวันนี้การพัฒนาเว็บไซต์เป็นเพียงเเค่เปิดใช้งานผ่านหน้าจอคอมพิวเตอร์เท่านั้น เเต่ต้องมีการพัฒนาให้ทันสมัยเข้าถึงทุกการใช้งานของ User การพัฒนาเว็บไซต์จึงมี คำว่า Responsive Web Design เกิดขึ้นมา ไม่ว่าหน้าจอ Iphone , Tablet, Ipad ต่างๆ นานา การพัฒนา CSS ซึ่งก็ต้องปรับเปลี่ยน Code เพื่อให้ได้รูปแบบตามที่สมควรจะแสดงตามเเต่ของหน้าจอ ที่นี่ปัญหาก็มีอยู่ว่าเราจะทดสอบการแสดงผลได้ยังไงล่ะ ? ถ้าเราไม่มี Iphone , Tablet, Ipad หรือ Smartphone ต่างๆ เเน่นอนค่ะ TIP ของเราวันนี้มีคำตอบ[/color]
[b]บทความที่เกี่ยวข้อง[/b]
[url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=25387&p=54987#p54987]- TIP : การเช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่[/url]
[url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=25543]- CSS3:การใช้งาน @media screen กำหนดคุณสมบัติ Class แบบ responsive[/url]
[i][color=#FF0080]
______________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS ซึ่งเป็นความรู้พื้นฐานในการพัฒนา [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript.html]JavaScrip[/url], [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery.html]JQuery[/url] หรือเเม้กระทั้ง [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-ajax.html]Ajax[/url] ต่อไป [url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=25876]ทั้งนี้สามารถดูรายละเอียด TIP ต่างๆ ได้ที่นี่[/url]ค่ะ เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]โดยสามารถศึกษาได้จากบทเรียน CSS ได้ที่นี่[/url] เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
______________________________________________________________________________________________[/color][/i]
[b]วิธีการทำงานของเครื่องมือ Web Develop เเละการใช้งานคือ[/b]
ถ้ายังไม่มีเครื่องมือ Web Develop สามารถดูวิธีการติดตั้งได้จาก https://www.mindphp.com/forums/viewtopic.php?f=73&t=26058
เมื่อเราเปิดเว็บไซต์ของเราขึ้นมา
[attachment=3]2015-02-11_23-24-41.png[/attachment]
จากนั้น คลิกที่เครื่องมือ Resize > view responsive layouts
[attachment=2]2015-02-11_23-26-40.png[/attachment]
[attachment=1]2015-02-11_23-27-22.png[/attachment]
[attachment=0]2015-02-11_23-27-55.png[/attachment]
* ภาพทั้งหมดเป็นเพียงเเค่ตัวอย่างเพียงส่วนเดียวเท่านั้นค่ะ *
Log in with LINE