CSS ปรับหน้าเว็บให้ พอดีกับทุกจอคอมพิวเตอร์ โดย

Nato_One · 06 พฤษภาคม 2012, 02:04:27

เกีี่ยวกับปรับหน้าเว็บให้ พอดี กับทุกจอคอมพิวเตอร์ ไม่ทราบว่าจะต้องใช้ css ยังไงหรอค่ะ สมมุติว่าจอ 17 นิ้ว เปิดก็ปรับความกว้างพอดีค่ะ 21 นิ้ว ก้พอดีอ่ะค่ะ ขอคำแนะนำหน่อยค่ะ

Positron · 06 พฤษภาคม 2012, 03:01:24

ต้องดูว่า จะให้ส่วนไหนพอดีกับหน้าจอครับ
เพราะปรกติแล้ว <body></body> มันก็พอดีกับหน้าจอ แต่ว่าเนื้อหาด้านในก็จะกว้างแตกต่างกันเพราะ
สาเหตุที่ไม่ค่อยทำให้เนื้อหาด้านในยืดตามหน้าจอ เพราะว่าการจัด layout จะยุ่งยากและไม่สวย

แต่ส่วนใหญ่แล้ว ถ้าจะใช้ลูกเล่นเกี่ยวกับทำให้หน้าเว็บเต็มหน้าจอในแต่ละขนาดนั้น ส่วนใหญ่จะใช้ javascript ช่วยคำนวน และปรับข้อมูลแต่ละส่วนให้ยืด/หดตามความเหมาะสม

Queue · 06 พฤษภาคม 2012, 03:10:24

http://www.960.gs/

http://grids.heroku.com/

ออกแบบ grid css ถ้าอยากได้แบบ ฟิก ก็เลือกแบบ ฟิก

ถ้าอยากเต็มหน้าจอ ย่อขยายได้ก็เลือกเป็น %

iMookz · 06 พฤษภาคม 2012, 04:37:00

http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

pay-skn · 06 พฤษภาคม 2012, 08:55:34

Likeครับ

smapan · 06 พฤษภาคม 2012, 09:15:08

ตอนนี้ joomla เทมเพลทใหม่ชื่อ ja lens

เค้าใช้หลักการ Responsive คือดูได้ทุก หน้าจอความละเอียดเท่าไหร่ก็ดูได้สวยหมด

เบื้องหลังความสำเร็จคือ javascript ที่เปลี่ยนตามขนาดของหน้าจอนั่นะครับ
jQuery Masonry http://masonry.desandro.com/

Sneak Peak1: K2/com_content Detailed page

Sneak Peak2: Home

Sneak Peak3: Portfolio/Items Listing

Sneak Peak4: Category/Blog View

Sneak Peak5: Comment Page View

Sneak Peak6: 404 Page View

ดูเว็บตัวเต็มๆที่ใช้ jQuery Masonry ได้ที่นี่ครับ
http://joomla25-templates.joomlart.com/ja_lens/
อีกแบบ
http://joomla25-templates.joomlart.com/ja_wall/
เว็บที่ผมใช้ javascript ดังกล่าว
http://www.joomlais.com

saikanojo · 06 พฤษภาคม 2012, 13:24:35

อ้างถึงจาก: iMookz ใน 06 พฤษภาคม 2012, 04:37:00
http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

comment นี้ตอบได้ดีมากเลยครับ น้อยคนที่จะใช้เรื่อง Grid อยากให้ลองดูครับ

KenjiroAPI · 06 พฤษภาคม 2012, 14:14:35

ลองค้นหาในกูเกิ้ลครับ คีย์เวิร์ดประมาณ CSS Responsive มันจะเป็นการกำหนด style ที่ตายตัวของความกว้างหน้าจอแต่ละแบบ หรือที่เขาเรียกกันว่าหลักการ Responsive ครับ

TummZ · 06 พฤษภาคม 2012, 15:10:36

น่าศึกษาเรื่อง Grid ดูน่าสนใจดี

bankster · 06 พฤษภาคม 2012, 15:19:14

ใช้ css3 Media Queries
แล้วก็ พวก fuild grid ครับ

ถ้าอยากศึกษา ให้ลองไปดูดฟรมเวิร์คตัวนี้ครับ

Bootstrap (แจกฟรีโดย Twitter)

jira2712 · 06 พฤษภาคม 2012, 15:31:58

ขอบคุณครับ

lkpoi · 06 พฤษภาคม 2012, 16:08:48

อยากให้ลอง เว็บนี้ครับ http://cssgrid.net/

Nato_One · 06 พฤษภาคม 2012, 21:22:28

ขอบคุณสำหรับทุกคำแนะนำค่ะ

ManyMoney · 06 พฤษภาคม 2012, 21:28:55

ที่ไหนแจกtemplate css3แบบรองรับทุกหน้าจอบ้าง?

marus · 07 พฤษภาคม 2012, 08:58:56

ง่ายๆหา theme ที่มีคนอื่นทำไว้แล้วแจกฟรี แล้วเอามาแก้ไข

saikanojo · 07 พฤษภาคม 2012, 13:26:25

เอาง่ายๆเลย หา Theme ที่ที่ใช้ Grid ครับ

Grid มันรวมหลักการ CSS Responsive ไว้อยู่แล้วครับ

เอา Theme พวกนี้มาแก้ งานจะไวกว่านั่งศึกษาและ เผลอๆเข้าใจง่ายกว่าด้วยเพราะเห็นภาพได้เลย

ลองดูครับ