|
หัวข้อ: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: nop101 ที่ 22 กรกฎาคม 2015, 06:40:25 ท่านใดมีวิธีเขียนแบบง่ายๆบ้างครับ
กำลังหาอยู่สับสนเกิน มีหลายแบบมาก :wanwan017: :wanwan017: หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: sputtaro ที่ 22 กรกฎาคม 2015, 08:22:22 การเขียนเว็บให้เป็น Responsive ความจริง อาจพูดได้ว่า ไม่ใช่เรื่องยากอีกแล้ว
เพราะมีแหล่งความรู้ให้ค้นคว้าจำนวนมาก, มีframework ให้เลือกใช้, ฯลฯ ขอเพียงให้คุณเริ่มต้นด้วยการลงมือทำ หากคุณจะเริ่มต้นวันนี้แบบง่ายๆก็ 1. กำหนด ค่า viewport ในส่วนหัวของไฟล์ html, php ฯลฯ ด้วยค่านี้ <meta name="viewport" content="width=device-width, initial-scale=1.0"> ลองค้นดูเพิ่มเติม เกี่ยวกับการตั้งค่า viewport ซึ่งสามารถตั้งค่าได้หลายแบบ คำคัน html viewport 2. กำหนดค่า ในไฟล์ html, php ฯลฯ ลองทดสอบแบบง่ายๆด้วย ตัวอย่างข้างล่างนี้ เขียนไฟล์ง่ายๆ <h1>Test My File</h1> 3. กำหนดค่า ในไฟล์ css เป็น ้h1{font-size:46px;} @media (max-width:499px) { h1{ font-size: 18px; line-height: 20px; } } @media (min-width:500px) { h1{ font-size: 28px; line-height: 30px; } } แล้วลองดูผล จากนั้นค่อย ค้นคว้า ว่า @media min-width หรือ @media max-width ควรกำหนดค่า อย่างไร เท่าไหร่ คำคัน Media Queries for Standard Devices และขยายการเขียนให้ครอบคลุม h2, h3, div ... ไปเรื่อยๆ จนครบตามที่คุณต้องการ 4. หากจะเขียนแบบซับซ้อน และต้องการใช้งานในสิ่งที่คนอื่นทำไว้ให้ใช้ฟรีอยู่แล้ว ลองศึกษา bootstrap http://getbootstrap.com/ หรือ foundation http://foundation.zurb.com/ ฯลฯ 5. ผมใช้ bootstrap + เขียนเองครับ **************** แก้ไข คำค้นครับ หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: elerider ที่ 22 กรกฎาคม 2015, 08:32:45 อยากรู้เหมือนกันจ้า THX ครับผม
หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: iC1assicTh ที่ 22 กรกฎาคม 2015, 08:45:28 ถ้าเขียนเอง ลอง Boostrap เลยครับแล้วจะติดใจ :wanwan020:
หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: kiraoji ที่ 22 กรกฎาคม 2015, 10:05:50 ิBootstrap จบเลยครับ
ถ้าเป็น html , css อยู่แล้ว ศึกษาแปบเดียวครับ ถ้าเขียนเอง ลอง Boostrap เลยครับแล้วจะติดใจ :wanwan020: หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: MD.18 ที่ 22 กรกฎาคม 2015, 10:27:08 แนะนำยากนะ เพราะไม่เห้นเลเอาท์หรือรายละเอียดความซับซ้อน ถ้าไม่ซับซ้อนมาก และเป้นหน้าเดียวจริงๆไม่ควรใช้framework ใดๆ เพราะมันเกินความจำเป้น
หลักๆในหน้าหนึ่งที่ควรจะต้องใช้คือ -metatag -โครงสร้างหลัก - html - header - body - section - article - aside - footer -การนำทาง - nav a ul li -จัดการกล่องเนื้อหา - div box1 2 3 ... -จัดการมัลติมีเดีย - bg - icon - figcaption figure img - video -จัดการฟอร์ม -จัดการที่เกี่ยวกับอักษร - tx-size - tx-color - h1 h2 h3 - streng bold indent line-height - จัดการ margin padding float position - เช็คเบรกพ้อทย์ เช่น 320 480 768 960 1024 1200 and more 1201 - เวลาใช้งานก็เรียกใช้เป็นมัลติคลาสเอาก็สะดวกดีครับ คงใช้ประมาณนี้ครับแบบพื้นๆนะ เขียนในไฟล์ css แยกก็ดีครับเพื่อคิดได้อยากทำหลายหน้าก็เชื่อมลิงค์ cssเอาเลย ดีกว่าเขียน css ลงในไฟล์ htmlครับ ส่วนพวก js แนะนำให้หลีกเลี่ยงครับ อนิเมชั่นก็ไปใช้ keyframes แทน ทั้งนี้ทั้งนั้น ความยาก และความยาวของโค๊ดก็ขึ้นกับงานที่ออกแบบไว้แหละครับ วิธีง่ายๆมันไม่มีหรอกครับเพราะทุกโค๊ดมันก็มีวิธีการเขียนที่มาตรฐานของมัน :wanwan020: แนะนำว่าควรมีตัวอย่างที่ออกแบบไว้มาถามด้วยไม่งั้นคนตอบ ไม่มีใครแนะนำได้หรอกครับ ถ้าจะเอา responsive แบบ 100% คงต้องละเอียดในทุก tag ที่มีแหละครับทั้ง กว้าง สูง แนวตั้ง แนวนอน ใช้หน่วยวัดเป้น % em หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: methapun ที่ 22 กรกฎาคม 2015, 10:48:26 เข้ามาหาความรู้
หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: แซงโลดอาว ที่ 22 กรกฎาคม 2015, 11:15:22 เคยหาข้อมูลช่วงนึง แล้วต้องหยุดไป ยิ่งดูยิ่ง งง :P
หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: ptteppawong ที่ 22 กรกฎาคม 2015, 16:43:33 ง่ายที่สุด ใช้
Artisteer เวอร์ชั่น 4 จะมีโหมดของ Responsive อยู่ครับ แล้วซื้อ plugin page builder มาช่วยในการจัดหน้าอีกที http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431 หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: ten1312 ที่ 22 กรกฎาคม 2015, 16:50:04 มีเว็บภาษาไทยให้ศึกษา bootstrap ไหมครับ
อยากเรียนรู้ หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: polarisz13 ที่ 22 กรกฎาคม 2015, 20:24:40 มีเว็บภาษาไทยให้ศึกษา bootstrap ไหมครับ อยากเรียนรู้ ดูในเว็บ Bootstrap เลยก็ได้ครับ มันจะมี Code Example พร้อม Preview ให้เราดูครับว่าผลจะออกมาเป็นยังไง แต่ถ้าในเรื่องของ Responsive หากใช้ Bootstrap ที่ควรดูหลัก มีไม่กี่อย่างครับ - Grid - Image - Table - Nav ( Menu ) ผมอธิบายคร่าวๆด้านล่างนะครับ # Grid ของ Bootstrap 1 บรรทัดจะแบ่งเป็น 12 Column ครับ แล้วจะมีตัวแปรกำหนดการใช้งาน เป็น col-xs col-sm col-md col-lg xs จะเหมาะสำหรับ Mobile , sm และ md จะอยู่ประมาณ Tablet/Desktopขนาดเล็ก , lg Desktop ขนาดใหญ่ ซึ่งใน Class ของ Bootstrap จะมีกำหนด Viewpoint มาแล้วครับ ว่า xs sm md lg จะถูกใช้งานเมื่อพบว่าหน้าที่เปิดมีขนาดจอเท่าไหร่ ตามภาพด้านล่างนี้ครับ ( ภาพด้านล่างจะบอกว่า xs sm md lg จะถูกใช้เมื่อเจอมีขนาดเท่าไหร่ครับ ) (http://browserfame.com/wp-content/uploads/2013/08/bootstrap3-grid-system.jpg) โดยใน Tag เราสามารถประกาศได้หลายแบบพร้อมๆกันเพื่อรองรับ Responsive ในหลายๆขนาดหน้าจอครับ เช่น <div class="col-xs-12 col-md-6"></div> - ซึ่งจะได้ความหมายว่า ถ้าคนที่เปิดเป็น Mobile มันจะยึดพื้นที่ทั้ง 12 column ครับ กินทั้งแถว แต่หากคนเปิดเป็น tablet/dektopเล็ก จะกินแค่ 6 Column ก็จะได้กล่องขนาด ครึ่งจอนั่นเอง <div class="col-xs-6 col-md-3 col-lg-3"></div> - อันนี้ก็เช่น Gallery ครับบน Desktop ผมให้โชว์ 4 ภาพ/แถว, และ 2 ภาพ/แถว สำหรับ Mobile นั่นเอง <div class="col-xs-12 col-lg-3"></div> <div class="col-xs-12 col-lg-3"></div> - Desktop จะได้ภาพ [ภาพใช้ 3][ภาพใช้ 3][ว่าง 6] ใช้ 1 แถว ในการแสดง 2 ภาพ และยังว่างอีก 6 ช่อง - Mobile จะได้ภาพ [ภาพใช้ 12] ขึ้นแถวใหม่ [ภาพใช้ 12] ใช้ 2 แถว ในการแสดง 2 ภาพ และไม่เหลือที่เลย ฮ่าๆ ภาพ Grid ที่ผมบอกว่าแบ่งได้ 12 ใน 1 แถว (http://bootstrapbay.com/blog/wp-content/uploads/2014/09/bootstrap-grid-system.jpg) ** อย่าลืมสร้าง class="row" ครอบก่อนใช้ col-* นะครับ เช่น <div class="row"><div class="col-sm-3"></div></div> # Image ก็ไม่มีไรมากครับ ภาพไหนจะให้ย่อตามจอ ก็ใส่ class="img-responsive" ครับ # Table เช่นเดียวกับภาพครับ จะใช้ class="table-responsive" ครับ (ถ้าผิดขออภัยลืมๆบ้างไม่ได้ใช้นาน) # NavBar ใน่สวนของ Bootstrap ลอง Copy Code มาวางแล้ว ทดสอบย่อจอดูครับ ก็ไม่มีไรมากเขียนตามๆมันไป โดยรวมมีเท่านี้ครับ หลักๆเลยคือ Grid ครับอยากโชว์เท่าไหร่ในจอขนาดไหน ก็ใส่ xs sm md lg ตามด้วย เลขครับ ไม่แน่ใจอธิบายงงไหม ยังไงลองดูในเว็บประกอบครับ ไม่ยากๆ แค่ลองเล่นครับ ^^ สู้ๆครับ หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: ten1312 ที่ 22 กรกฎาคม 2015, 21:24:00 มีเว็บภาษาไทยให้ศึกษา bootstrap ไหมครับ อยากเรียนรู้ ดูในเว็บ Bootstrap เลยก็ได้ครับ มันจะมี Code Example พร้อม Preview ให้เราดูครับว่าผลจะออกมาเป็นยังไง แต่ถ้าในเรื่องของ Responsive หากใช้ Bootstrap ที่ควรดูหลัก มีไม่กี่อย่างครับ - Grid - Image - Table - Nav ( Menu ) ผมอธิบายคร่าวๆด้านล่างนะครับ # Grid ของ Bootstrap 1 บรรทัดจะแบ่งเป็น 12 Column ครับ แล้วจะมีตัวแปรกำหนดการใช้งาน เป็น col-xs col-sm col-md col-lg xs จะเหมาะสำหรับ Mobile , sm และ md จะอยู่ประมาณ Tablet/Desktopขนาดเล็ก , lg Desktop ขนาดใหญ่ ซึ่งใน Class ของ Bootstrap จะมีกำหนด Viewpoint มาแล้วครับ ว่า xs sm md lg จะถูกใช้งานเมื่อพบว่าหน้าที่เปิดมีขนาดจอเท่าไหร่ ตามภาพด้านล่างนี้ครับ ( ภาพด้านล่างจะบอกว่า xs sm md lg จะถูกใช้เมื่อเจอมีขนาดเท่าไหร่ครับ ) ([url]http://browserfame.com/wp-content/uploads/2013/08/bootstrap3-grid-system.jpg[/url]) โดยใน Tag เราสามารถประกาศได้หลายแบบพร้อมๆกันเพื่อรองรับ Responsive ในหลายๆขนาดหน้าจอครับ เช่น <div class="col-xs-12 col-md-6"></div> - ซึ่งจะได้ความหมายว่า ถ้าคนที่เปิดเป็น Mobile มันจะยึดพื้นที่ทั้ง 12 column ครับ กินทั้งแถว แต่หากคนเปิดเป็น tablet/dektopเล็ก จะกินแค่ 6 Column ก็จะได้กล่องขนาด ครึ่งจอนั่นเอง <div class="col-xs-6 col-md-3 col-lg-3"></div> - อันนี้ก็เช่น Gallery ครับบน Desktop ผมให้โชว์ 4 ภาพ/แถว, และ 2 ภาพ/แถว สำหรับ Mobile นั่นเอง <div class="col-xs-12 col-lg-3"></div> <div class="col-xs-12 col-lg-3"></div> - Desktop จะได้ภาพ [ภาพใช้ 3][ภาพใช้ 3][ว่าง 6] ใช้ 1 แถว ในการแสดง 2 ภาพ และยังว่างอีก 6 ช่อง - Mobile จะได้ภาพ [ภาพใช้ 12] ขึ้นแถวใหม่ [ภาพใช้ 12] ใช้ 2 แถว ในการแสดง 2 ภาพ และไม่เหลือที่เลย ฮ่าๆ ภาพ Grid ที่ผมบอกว่าแบ่งได้ 12 ใน 1 แถว ([url]http://bootstrapbay.com/blog/wp-content/uploads/2014/09/bootstrap-grid-system.jpg[/url]) ** อย่าลืมสร้าง class="row" ครอบก่อนใช้ col-* นะครับ เช่น <div class="row"><div class="col-sm-3"></div></div> # Image ก็ไม่มีไรมากครับ ภาพไหนจะให้ย่อตามจอ ก็ใส่ class="img-responsive" ครับ # Table เช่นเดียวกับภาพครับ จะใช้ class="table-responsive" ครับ (ถ้าผิดขออภัยลืมๆบ้างไม่ได้ใช้นาน) # NavBar ใน่สวนของ Bootstrap ลอง Copy Code มาวางแล้ว ทดสอบย่อจอดูครับ ก็ไม่มีไรมากเขียนตามๆมันไป โดยรวมมีเท่านี้ครับ หลักๆเลยคือ Grid ครับอยากโชว์เท่าไหร่ในจอขนาดไหน ก็ใส่ xs sm md lg ตามด้วย เลขครับ ไม่แน่ใจอธิบายงงไหม ยังไงลองดูในเว็บประกอบครับ ไม่ยากๆ แค่ลองเล่นครับ ^^ สู้ๆครับ ขอบคุณมาก เดี๋ยวลองเล่นดู หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: godzillaser ที่ 23 กรกฎาคม 2015, 00:45:58 อยากง่ายเลยไหมครับ จับลาก ลอง
โค๊ด: www.wix.com หัวข้อ: Re: ทำเว็บหน้าเดียวให้ Responsive มือถือ ทำยังไงให้ง่ายครับ เริ่มหัวข้อโดย: Gadget ที่ 23 กรกฎาคม 2015, 08:02:17 แจ่มๆ เก็บไว้ก่อน
|