ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์ProgrammingCSS ปรับหน้าเว็บให้ พอดีกับทุกจอคอมพิวเตอร์ โดย
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: CSS ปรับหน้าเว็บให้ พอดีกับทุกจอคอมพิวเตอร์ โดย  (อ่าน 21852 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
Nato_One
Newbie
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 72



ดูรายละเอียด
« เมื่อ: 06 พฤษภาคม 2012, 02:04:27 »
เกีี่ยวกับปรับหน้าเว็บให้ พอดี กับทุกจอคอมพิวเตอร์ ไม่ทราบว่าจะต้องใช้ css  ยังไงหรอค่ะ สมมุติว่าจอ 17 นิ้ว เปิดก็ปรับความกว้างพอดีค่ะ 21 นิ้ว ก้พอดีอ่ะค่ะ ขอคำแนะนำหน่อยค่ะ
บันทึกการเข้า
Positron
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 289
ออฟไลน์ ออฟไลน์

กระทู้: 1,060



ดูรายละเอียด
« ตอบ #1 เมื่อ: 06 พฤษภาคม 2012, 03:01:24 »
ต้องดูว่า จะให้ส่วนไหนพอดีกับหน้าจอครับ
เพราะปรกติแล้ว <body></body> มันก็พอดีกับหน้าจอ แต่ว่าเนื้อหาด้านในก็จะกว้างแตกต่างกันเพราะ
สาเหตุที่ไม่ค่อยทำให้เนื้อหาด้านในยืดตามหน้าจอ เพราะว่าการจัด layout จะยุ่งยากและไม่สวย

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

พลังน้ำใจ: 106
ออฟไลน์ ออฟไลน์

กระทู้: 4,295



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 06 พฤษภาคม 2012, 03:10:24 »
http://www.960.gs/

http://grids.heroku.com/

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

ถ้าอยากเต็มหน้าจอ ย่อขยายได้ก็เลือกเป็น %
« แก้ไขครั้งสุดท้าย: 06 พฤษภาคม 2012, 03:11:08 โดย Queue » บันทึกการเข้า
พิษณุโลก NaiQueue ท่องเที่ยวเมืองไทย ยิ้มโซน
iMookz
Verified Seller
สมุนแก๊งเสียว
*

พลังน้ำใจ: 93
ออฟไลน์ ออฟไลน์

กระทู้: 625



ดูรายละเอียด
« ตอบ #3 เมื่อ: 06 พฤษภาคม 2012, 04:37:00 »
http://speckyboy.com/2011/11/1...-frameworks-worth-considering/
บันทึกการเข้า
pay-skn
สมุนแก๊งเสียว
*

พลังน้ำใจ: 76
ออฟไลน์ ออฟไลน์

กระทู้: 861



ดูรายละเอียด
« ตอบ #4 เมื่อ: 06 พฤษภาคม 2012, 08:55:34 »
Likeครับ
บันทึกการเข้า
คิวรถตู้อยุธยา เชียงใหม่   เฉลย แบบฝึกหัด วิทยาการคำนวณ สสวท คิวรถตู้ วินรถตู้
smapan
Global Moderator
เจ้าพ่อบอร์ดเสียว
*****

พลังน้ำใจ: 643
ออฟไลน์ ออฟไลน์

กระทู้: 8,272



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 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
« แก้ไขครั้งสุดท้าย: 06 พฤษภาคม 2012, 09:57:01 โดย smapan » บันทึกการเข้า
จูมล่าโฮส สยามโฮสเว็บ modty.com
รวมที่พัก เช่ารายวัน ที่พักเช่ารายเดือนมากที่สุดแจ่มจริง
***Tel 083-757-1515 ติดปัญหา Joomla ตรงไหนรับปรึกษาฟรี โทรมาเถอะครับ ถ้าตอบได้ช่วยแน่นอน ไม่มีกั้ก. ***
saikanojo
ก๊วนเสียว
*

พลังน้ำใจ: 27
ออฟไลน์ ออฟไลน์

กระทู้: 283



ดูรายละเอียด
« ตอบ #6 เมื่อ: 06 พฤษภาคม 2012, 13:24:35 »
อ้างจาก: iMookz ที่ 06 พฤษภาคม 2012, 04:37:00
http://speckyboy.com/2011/11/1...-frameworks-worth-considering/


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

พลังน้ำใจ: 65
ออฟไลน์ ออฟไลน์

กระทู้: 332



ดูรายละเอียด
« ตอบ #7 เมื่อ: 06 พฤษภาคม 2012, 14:14:35 »
ลองค้นหาในกูเกิ้ลครับ คีย์เวิร์ดประมาณ CSS Responsive มันจะเป็นการกำหนด style ที่ตายตัวของความกว้างหน้าจอแต่ละแบบ หรือที่เขาเรียกกันว่าหลักการ Responsive ครับ
บันทึกการเข้า
TummZ
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 93
ออฟไลน์ ออฟไลน์

กระทู้: 1,346



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 06 พฤษภาคม 2012, 15:10:36 »
น่าศึกษาเรื่อง Grid ดูน่าสนใจดี
บันทึกการเข้า

จองโรงแรม สวนผึ้ง หัวหิน
bankster
ก๊วนเสียว
*

พลังน้ำใจ: 27
ออฟไลน์ ออฟไลน์

กระทู้: 289



ดูรายละเอียด เว็บไซต์
« ตอบ #9 เมื่อ: 06 พฤษภาคม 2012, 15:19:14 »
ใช้ css3 Media Queries
แล้วก็ พวก fuild grid ครับ

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

Bootstrap (แจกฟรีโดย Twitter)
บันทึกการเข้า
รับออกแบบและพัฒนาเว็บไซต์
jira2712
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 175
ออฟไลน์ ออฟไลน์

กระทู้: 1,626



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 06 พฤษภาคม 2012, 15:31:58 »
ขอบคุณครับ  wanwan020
บันทึกการเข้า
หัวน้ำหอม ขายส่งหัวน้ำหอม ขายหัวน้ำหอม หัวเชื้อน้ำหอม ขายส่งหัวเชื้อน้ำหอม zateers.com
หัวน้ำหอม
สารกำจัดเชื้อรา สารกำจัดโรคพืช สารป้องกันโรคพืช zateers.com/greens/
สารกำจัดเชื้อรา
lkpoi
ก๊วนเสียว
*

พลังน้ำใจ: 32
ออฟไลน์ ออฟไลน์

กระทู้: 439



ดูรายละเอียด เว็บไซต์
« ตอบ #11 เมื่อ: 06 พฤษภาคม 2012, 16:08:48 »
อยากให้ลอง เว็บนี้ครับ http://cssgrid.net/
บันทึกการเข้า
CuteHerbal-ของชำร่วย ของรับไหว้ผู้ใหญ่ ของรับไหว้เพื่อสุขภาพ ของชำร่วยพรีเมี่ยมราคาไม่แพง ชาหอม ชาสมุนไพร ชาดอกไม้ น้ำผึ้งของชำร่วย
Nato_One
Newbie
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 72



ดูรายละเอียด
« ตอบ #12 เมื่อ: 06 พฤษภาคม 2012, 21:22:28 »
ขอบคุณสำหรับทุกคำแนะนำค่ะ
บันทึกการเข้า
ManyMoney
คนรักเสียว
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 192



ดูรายละเอียด เว็บไซต์
« ตอบ #13 เมื่อ: 06 พฤษภาคม 2012, 21:28:55 »
ที่ไหนแจกtemplate css3แบบรองรับทุกหน้าจอบ้าง?
บันทึกการเข้า
http://www.thaiseoboard.com/in...250.msg2456335.html#msg2456335 หานายทุนโรงไฟฟ้าพลังสะอาด

ขายที่ดินสวนผึ้ง พร้อมบ้าน7หลัง รวม12ไร่ ด้านหน้าติดถนน ด้านหลังติดเขา มีธารน้ำ วิวสวยที่สุดในสวนผึ้ง ขายรวม 12.7 ล้านบาท ภบท.5 สนใจpmขอดูรูปได้เลยครับ
marus
ก๊วนเสียว
*

พลังน้ำใจ: 41
ออฟไลน์ ออฟไลน์

กระทู้: 467



ดูรายละเอียด
« ตอบ #14 เมื่อ: 07 พฤษภาคม 2012, 08:58:56 »
ง่ายๆหา theme ที่มีคนอื่นทำไว้แล้วแจกฟรี แล้วเอามาแก้ไข
บันทึกการเข้า
saikanojo
ก๊วนเสียว
*

พลังน้ำใจ: 27
ออฟไลน์ ออฟไลน์

กระทู้: 283



ดูรายละเอียด
« ตอบ #15 เมื่อ: 07 พฤษภาคม 2012, 13:26:25 »
เอาง่ายๆเลย หา Theme ที่ที่ใช้ Grid ครับ

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

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

ลองดูครับ
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: