ถามไหน่อยครับตอนเขียนเว็บบนมือถือเจอปัญหาอย่างนึงครับ

[kunnarakkup]

คือผมเคยเขียนเว็บให้รองรับบนมือถืออะครับ เช่น ผมมีสินค้าวาง สาม แถว สามคอลัม แถวละ 3 ชิ้นอะครับ แต่พอเปิดบนแท๊บเล็ตสิน้ามันจะตกมาให้พอดีใช่มั้ยครับอย่างเช่นตกมาเหลือแค่ 1แถว พอมันเป็นงี้มันจะเว้นซ้ายขวาไม่ตรงเลยครับมันต้องปรับไงเหรอ ตรงนี้ผมใส่เป็น ul li ครับ สงสัยมากๆ

[raykung]

มีรูปตัวอย่างให้ดูไหมครับ ว่าผลที่ได้ตอนนี้เป็นยังไง และต้องการให้เป็นยังไง

ส่วนตัวผมใช้วิธีลงทีละโหล (12 รายการ) นะมันแบ่งลงตัวได้หลายแบบเช่น

ถ้าแถวละ 2 ชิ้น ก็ได้ 6 แถว
ถ้าแถวละ 3 ชิ้น ก็ได้ 4 แถว
ถ้าแถวละ 4 ชิ้น ก็ได้ 3 แถว

[nakahashi]

ถ้าไม่ไหวจริงๆเขียนแยก site ไปเลยค่ะ ถึกหน่อย แบบ m.domain.com อะไรแบบนี้

[kunnarakkup]

มีรูปตัวอย่างให้ดูไหมครับ ว่าผลที่ได้ตอนนี้เป็นยังไง และต้องการให้เป็นยังไง

ส่วนตัวผมใช้วิธีลงทีละโหล (12 รายการ) นะมันแบ่งลงตัวได้หลายแบบเช่น

ถ้าแถวละ 2 ชิ้น ก็ได้ 6 แถว
ถ้าแถวละ 3 ชิ้น ก็ได้ 4 แถว
ถ้าแถวละ 4 ชิ้น ก็ได้ 3 แถว

อ่อผมหมายถึงพื้นที่ซ้ายขวาระว่างสินค้าตรงกลางครับ งงมั้ยอะ แบบว่าพอสินค้าตัดแถวลงมาเหมือนสินค้ามันชิดซ้ายไม่อยู่ตรงกลางอะครับ พอปรับให้อยู่ตรงกลางพอย่อ browser ลงเรื่อยๆ สินค้าจะไม่อยู่ตรงกลางรับจะขยับไปซ้ายมือต้องมมาปรับเองเกือบทุก pixel เลยครับ จริงๆก็เหมือนเคยแก้ได้แล้วแต่จำไม่ได้ว่าทำไง

[kunnarakkup]

ถ้าไม่ไหวจริงๆเขียนแยก site ไปเลยค่ะ ถึกหน่อย แบบ m.domain.com อะไรแบบนี้

แบบนี้ก็น่าสนดีครับคิดๆดูแล้วทำให้เขียนบน pc ได้ง่ายดีด้วย ไม่ต้องห่วงเรื่องหน้าจอเลย

[wasantec]

มีเว็บไหมครับ จะได้ดูง่ายๆ

[toekingsize]

ในส่วนของ .container (แล้วแต่บางเว็บ)

ลองกำหนดดูแบบนี้ครับ

    padding-right: 10px;
    padding-left: 10px;

[Nokky@#]

ถ้าไม่แยกเว็ป ใช้แบบนี้ครับ

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

หมายความว่า ถ้าหน้าจอกว้างกว่า 480px พื้นหลังเว็ปจะเป็นสีเขียวอ่อน

[kunnarakkup]

มีเว็บไหมครับ จะได้ดูง่ายๆ

เว็บนี้้อะครับ http://kidart-sqi.com/home.php   มันคาใจอะครับ

[toekingsize]

เซ็ตตามนี้ครับ ให้อยู่กึ่งกลาง

@media (max-width: 399px) and (min-width: 350px)
.box1 {
   width: 245px;
height: 305px;
   margin-left: auto;
   margin-right: auto;

[wasantec]

มีเว็บไหมครับ จะได้ดูง่ายๆ

เว็บนี้้อะครับ http://kidart-sqi.com/home.php   มันคาใจอะครับ

ให้ดูเว็บแต่ปิดคลิกขวา ผมก็ไม่รู้จะตอบยังไงเหมือนกัน ทดสอบ Css ไม่ได้ครับ ลองกำหนด margin เป็น % ดูครับ

[MD.18]

  ผมว่าใช้ขนาดเป็น width:100% คุมง่ายกว่านะครับ แล้วค่อยเช็คจุดที่จะเช็ค responsive เอา

เช่น
ตัว main-box คุณก็กำหนดไว้ก่อน 100% max-width เท่าไหร่ก็ว่ากันไป
แล้วด้านในใส่ กล่องซ้อนเข้าไป ทั้ง col-left และ col-right อาจจะแบ่งเป็น 70% กับ 30% ก็ได้
แล้วเวลาทำ responsive ก็ปรับขนาดให้เป้น 100% ตามจุดที่ใช้เช็ค หรือเป็นไปตามที่ออกแบบ จะคุมง่ายกว่านะครับ โดยที่ใช้ margin:0 auto ไปเลย มันจะคำนวนกึ่งกลางให้เอง

แต่เอาจริงๆ เทคนิคมันก็มีอีกเยอะแหละครับที่จะทำให้มันดูพอดี

ปล. ห้ามคลิ๊กขวาก็กด f12 ได้นะครับ 

[WP-design]

ผมว่าใช้ขนาดเป็น width:100% คุมง่ายกว่านะครับ แล้วค่อยเช็คจุดที่จะเช็ค responsive เอา

เช่น
ตัว main-box คุณก็กำหนดไว้ก่อน 100% max-width เท่าไหร่ก็ว่ากันไป
แล้วด้านในใส่ กล่องซ้อนเข้าไป ทั้ง col-left และ col-right อาจจะแบ่งเป็น 70% กับ 30% ก็ได้
แล้วเวลาทำ responsive ก็ปรับขนาดให้เป้น 100% ตามจุดที่ใช้เช็ค หรือเป็นไปตามที่ออกแบบ จะคุมง่ายกว่านะครับ โดยที่ใช้ margin:0 auto ไปเลย มันจะคำนวนกึ่งกลางให้เอง

แต่เอาจริงๆ เทคนิคมันก็มีอีกเยอะแหละครับที่จะทำให้มันดูพอดี

ปล. ห้ามคลิ๊กขวาก็กด f12 ได้นะครับ 

ดูแล้วไม่น่าจะยากนะครับ

ปล. กด F12 ได้ก็จริง แต่ท่านต้องเขาไปงมหาตรงจุดนั้นอีกผมว่ามันน่าจะเสียเวลา 555+