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

Post a reply


In an effort to prevent automatic submissions, we require that you complete the following challenge.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is ON
[url] is ON
Smilies are ON

Topic review
   

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

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

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
2015-02-11_23-24-41.png (107.43 KiB) Viewed 540 times
จากนั้น คลิกที่เครื่องมือ Resize > view responsive layouts
2015-02-11_23-26-40.png
2015-02-11_23-26-40.png (110.73 KiB) Viewed 540 times
2015-02-11_23-27-22.png
2015-02-11_23-27-22.png (107.09 KiB) Viewed 540 times
2015-02-11_23-27-55.png
2015-02-11_23-27-55.png (66.1 KiB) Viewed 540 times
* ภาพทั้งหมดเป็นเพียงเเค่ตัวอย่างเพียงส่วนเดียวเท่านั้นค่ะ *

Top