ต่อไป »

[nop101]

ท่านใดมีวิธีเขียนแบบง่ายๆบ้างครับ

กำลังหาอยู่สับสนเกิน มีหลายแบบมาก

 

[sputtaro]

การเขียนเว็บให้เป็น 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 + เขียนเองครับ

****************
แก้ไข คำค้นครับ

[elerider]

อยากรู้เหมือนกันจ้า THX ครับผม

[iC1assicTh]

ถ้าเขียนเอง ลอง Boostrap เลยครับแล้วจะติดใจ 

[kiraoji]

ิBootstrap จบเลยครับ

ถ้าเป็น html , css อยู่แล้ว ศึกษาแปบเดียวครับ

ถ้าเขียนเอง ลอง Boostrap เลยครับแล้วจะติดใจ 

[MD.18]

แนะนำยากนะ เพราะไม่เห้นเลเอาท์หรือรายละเอียดความซับซ้อน ถ้าไม่ซับซ้อนมาก และเป้นหน้าเดียวจริงๆไม่ควรใช้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 แทน
ทั้งนี้ทั้งนั้น ความยาก และความยาวของโค๊ดก็ขึ้นกับงานที่ออกแบบไว้แหละครับ วิธีง่ายๆมันไม่มีหรอกครับเพราะทุกโค๊ดมันก็มีวิธีการเขียนที่มาตรฐานของมัน

  แนะนำว่าควรมีตัวอย่างที่ออกแบบไว้มาถามด้วยไม่งั้นคนตอบ ไม่มีใครแนะนำได้หรอกครับ
ถ้าจะเอา responsive แบบ 100% คงต้องละเอียดในทุก tag ที่มีแหละครับทั้ง กว้าง สูง แนวตั้ง แนวนอน ใช้หน่วยวัดเป้น % em

[methapun]

เข้ามาหาความรู้

[แซงโลดอาว]

เคยหาข้อมูลช่วงนึง แล้วต้องหยุดไป ยิ่งดูยิ่ง งง 

[ptteppawong]

ง่ายที่สุด  ใช้

Artisteer  เวอร์ชั่น 4  จะมีโหมดของ Responsive อยู่ครับ

แล้วซื้อ plugin page builder มาช่วยในการจัดหน้าอีกที   

http://codecanyon.net/item/vis...e-builder-for-wordpress/242431

[ten1312]

มีเว็บภาษาไทยให้ศึกษา bootstrap ไหมครับ
อยากเรียนรู้

[polarisz13]

มีเว็บภาษาไทยให้ศึกษา 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 จะถูกใช้เมื่อเจอมีขนาดเท่าไหร่ครับ )


โดยใน 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 แถว


** อย่าลืมสร้าง 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 ตามด้วย เลขครับ
ไม่แน่ใจอธิบายงงไหม ยังไงลองดูในเว็บประกอบครับ ไม่ยากๆ แค่ลองเล่นครับ
^^ สู้ๆครับ

[ten1312]

มีเว็บภาษาไทยให้ศึกษา 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 จะถูกใช้เมื่อเจอมีขนาดเท่าไหร่ครับ )


โดยใน 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 แถว


** อย่าลืมสร้าง 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 ตามด้วย เลขครับ
ไม่แน่ใจอธิบายงงไหม ยังไงลองดูในเว็บประกอบครับ ไม่ยากๆ แค่ลองเล่นครับ
^^ สู้ๆครับ

ขอบคุณมาก เดี๋ยวลองเล่นดู

[godzillaser]

อยากง่ายเลยไหมครับ จับลาก ลอง

โค๊ด:

www.wix.com

[Gadget]

แจ่มๆ เก็บไว้ก่อน