การทำหัวเว็บแบบ Responsive คงเหลือแต่โลโก้ และแบนเนอร์สินะ

[ptteppawong]

ขอบคุณทุกท่านมากนะครับ   ได้รับความรู้เพิ่มเติมอีกเยอะเลยครับ     

[ptteppawong]

ขอบคุณครับ  สำหรับทุกความเห็น ....

ถามต่อนะครับ ......

สมมุติผมออกแบบหัวเว็บ   เพื่อการแสดงผลบน Desktop ที่ขนาด   1000 x 200px  

และผมออกแบบขนาดต่าง ๆ   อีก  3  ขนาด  เพื่อการแสดงผลบน tablet  และบนมือถือด้วย  

ใช้โค้ดตัวไหนเช็คครับ  ว่าถ้าเป็นอุปกรณ์แบบนี้ ให้แสดงผลหัวเว็บขนาดนี้มาแสดง    

ที่ต้องถามว่าใช้โค้ดอะไร   เพราะผมไม่เก่งเรื่องโค้ดครับ  ยังไงรบกวนด้วยครับ

ตัวอย่างการเขียน CSS แบบ Media Query ลองเอาไปประยุกต์ดูครับ

<style="text/css">
    .banner{margin:0 auto;}
    .banner-desktop{width:1000px; height:300px; background-color:blue; text-decoration:none;}
    .banner-tablet{width:640px; height:200px; background-color:purple; text-decoration:none;}
    .banner-mobile{width:320px; height:320px; background-color:green; text-decoration:none;}
    @media only screen and (min-width:1000px]){ /*แสดงผลบนหน้าจอ Desktop*/
         .banner{width:1000px;}
         .banner-desktop{display:block;}
         .banner-tablet{display:none;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:999px) and (min-width:640px){ /*แสดงผลบนหน้าจอ Tablet*/
         .banner{width:640px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:block;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:639px){ /*แสดงผลบนหน้าจอ Mobile*/
         .banner{width:320px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:none;}
         .banner-mobile{display:block;}
    }
</style>

<div class="banner">
    <a class="banner-desktop" href="#"></a>
    <a class="banner-tablet" href="#"></a>
    <a class="banner-mobile" href="#"></a>
</div>

แล้วจะใส่ url ของภาพแทรกไว้ตรงโค้ดตำแหน่งไหนครับ....

[BakKheab]

ขอบคุณครับ  สำหรับทุกความเห็น ....

ถามต่อนะครับ ......

สมมุติผมออกแบบหัวเว็บ   เพื่อการแสดงผลบน Desktop ที่ขนาด   1000 x 200px  

และผมออกแบบขนาดต่าง ๆ   อีก  3  ขนาด  เพื่อการแสดงผลบน tablet  และบนมือถือด้วย  

ใช้โค้ดตัวไหนเช็คครับ  ว่าถ้าเป็นอุปกรณ์แบบนี้ ให้แสดงผลหัวเว็บขนาดนี้มาแสดง    

ที่ต้องถามว่าใช้โค้ดอะไร   เพราะผมไม่เก่งเรื่องโค้ดครับ  ยังไงรบกวนด้วยครับ

ตัวอย่างการเขียน CSS แบบ Media Query ลองเอาไปประยุกต์ดูครับ

<style="text/css">
    .banner{margin:0 auto;}
    .banner-desktop{width:1000px; height:300px; background-color:blue; text-decoration:none;}
    .banner-tablet{width:640px; height:200px; background-color:purple; text-decoration:none;}
    .banner-mobile{width:320px; height:320px; background-color:green; text-decoration:none;}
    @media only screen and (min-width:1000px]){ /*แสดงผลบนหน้าจอ Desktop*/
         .banner{width:1000px;}
         .banner-desktop{display:block;}
         .banner-tablet{display:none;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:999px) and (min-width:640px){ /*แสดงผลบนหน้าจอ Tablet*/
         .banner{width:640px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:block;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:639px){ /*แสดงผลบนหน้าจอ Mobile*/
         .banner{width:320px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:none;}
         .banner-mobile{display:block;}
    }
</style>

<div class="banner">
    <a class="banner-desktop" href="#"></a>
    <a class="banner-tablet" href="#"></a>
    <a class="banner-mobile" href="#"></a>
</div>

แล้วจะใส่ url ของภาพแทรกไว้ตรงโค้ดตำแหน่งไหนครับ....

เพิ่ม Tag Img ลงในส่วนของ HTML

<div class="banner">
     <a class="banner-desktop" href="#"><img src="banner-desktop.gif"/></a>
     <a class="banner-tablet" href="#"><img src="banner-tablet.gif"/></a>
     <a class="banner-mobile" href="#"><img src="banner-mobile.gif"/></a>
</div>

[ptteppawong]

ขอบคุณครับ  สำหรับทุกความเห็น ....

ถามต่อนะครับ ......

สมมุติผมออกแบบหัวเว็บ   เพื่อการแสดงผลบน Desktop ที่ขนาด   1000 x 200px  

และผมออกแบบขนาดต่าง ๆ   อีก  3  ขนาด  เพื่อการแสดงผลบน tablet  และบนมือถือด้วย  

ใช้โค้ดตัวไหนเช็คครับ  ว่าถ้าเป็นอุปกรณ์แบบนี้ ให้แสดงผลหัวเว็บขนาดนี้มาแสดง    

ที่ต้องถามว่าใช้โค้ดอะไร   เพราะผมไม่เก่งเรื่องโค้ดครับ  ยังไงรบกวนด้วยครับ

ตัวอย่างการเขียน CSS แบบ Media Query ลองเอาไปประยุกต์ดูครับ

<style="text/css">
    .banner{margin:0 auto;}
    .banner-desktop{width:1000px; height:300px; background-color:blue; text-decoration:none;}
    .banner-tablet{width:640px; height:200px; background-color:purple; text-decoration:none;}
    .banner-mobile{width:320px; height:320px; background-color:green; text-decoration:none;}
    @media only screen and (min-width:1000px]){ /*แสดงผลบนหน้าจอ Desktop*/
         .banner{width:1000px;}
         .banner-desktop{display:block;}
         .banner-tablet{display:none;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:999px) and (min-width:640px){ /*แสดงผลบนหน้าจอ Tablet*/
         .banner{width:640px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:block;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:639px){ /*แสดงผลบนหน้าจอ Mobile*/
         .banner{width:320px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:none;}
         .banner-mobile{display:block;}
    }
</style>

<div class="banner">
    <a class="banner-desktop" href="#"></a>
    <a class="banner-tablet" href="#"></a>
    <a class="banner-mobile" href="#"></a>
</div>

แล้วจะใส่ url ของภาพแทรกไว้ตรงโค้ดตำแหน่งไหนครับ....

เพิ่ม Tag Img ลงในส่วนของ HTML

<div class="banner">
     <a class="banner-desktop" href="#"><img src="banner-desktop.gif"/></a>
     <a class="banner-tablet" href="#"><img src="banner-tablet.gif"/></a>
     <a class="banner-mobile" href="#"><img src="banner-mobile.gif"/></a>
</div>

มันแสดงมาพร้อมกันหมดเลยครับ

http://xn--b3c3acw1an2b3b4a4ira.com/

[wasantec]

ขอบคุณครับ  สำหรับทุกความเห็น ....

ถามต่อนะครับ ......

สมมุติผมออกแบบหัวเว็บ   เพื่อการแสดงผลบน Desktop ที่ขนาด   1000 x 200px  

และผมออกแบบขนาดต่าง ๆ   อีก  3  ขนาด  เพื่อการแสดงผลบน tablet  และบนมือถือด้วย  

ใช้โค้ดตัวไหนเช็คครับ  ว่าถ้าเป็นอุปกรณ์แบบนี้ ให้แสดงผลหัวเว็บขนาดนี้มาแสดง    

ที่ต้องถามว่าใช้โค้ดอะไร   เพราะผมไม่เก่งเรื่องโค้ดครับ  ยังไงรบกวนด้วยครับ

ตัวอย่างการเขียน CSS แบบ Media Query ลองเอาไปประยุกต์ดูครับ

<style="text/css">
    .banner{margin:0 auto;}
    .banner-desktop{width:1000px; height:300px; background-color:blue; text-decoration:none;}
    .banner-tablet{width:640px; height:200px; background-color:purple; text-decoration:none;}
    .banner-mobile{width:320px; height:320px; background-color:green; text-decoration:none;}
    @media only screen and (min-width:1000px]){ /*แสดงผลบนหน้าจอ Desktop*/
         .banner{width:1000px;}
         .banner-desktop{display:block;}
         .banner-tablet{display:none;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:999px) and (min-width:640px){ /*แสดงผลบนหน้าจอ Tablet*/
         .banner{width:640px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:block;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:639px){ /*แสดงผลบนหน้าจอ Mobile*/
         .banner{width:320px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:none;}
         .banner-mobile{display:block;}
    }
</style>

<div class="banner">
    <a class="banner-desktop" href="#"></a>
    <a class="banner-tablet" href="#"></a>
    <a class="banner-mobile" href="#"></a>
</div>

แล้วจะใส่ url ของภาพแทรกไว้ตรงโค้ดตำแหน่งไหนครับ....

เพิ่ม Tag Img ลงในส่วนของ HTML

<div class="banner">
     <a class="banner-desktop" href="#"><img src="banner-desktop.gif"/></a>
     <a class="banner-tablet" href="#"><img src="banner-tablet.gif"/></a>
     <a class="banner-mobile" href="#"><img src="banner-mobile.gif"/></a>
</div>

มันแสดงมาพร้อมกันหมดเลยครับ

http://xn--b3c3acw1an2b3b4a4ira.com/

โค้ด เลือก ขยาย

<style="text/css">
     .banner{margin:0 auto;}
     .banner-desktop{width:1000px; height:300px; display: block; background-color:blue; text-decoration:none;}
     .banner-tablet{width:640px; height:200px; display: none; background-color:purple; text-decoration:none;}
     .banner-mobile{width:320px; height:320px;display: none; background-color:green; text-decoration:none;}
     

     @media only screen and (max-width:980px){ /*แสดงผลบนหน้าจอ Tablet*/
          .banner-tablet{display:block;}
          .banner-desktop{display:none;}
          .banner-mobile{display:none;}
     }
     @media only screen and (max-width:480px){ /*แสดงผลบนหน้าจอ Mobile*/
          .banner-mobile{display:block;}
          .banner-desktop{display:none;}
          .banner-tablet{display:none;}
     }
</style>

ลอดูครับ

[kiraoji]

น่าจะได้เห็น Responsive ในหลากหลายรูปแบบในอนาคตนะครับ 

[MD.18]

สมัยนี้ใช้ tag <picture></picture> กันแล้วครับ ง่าย สะดวก ถูกหลักโครงสร้างสมัยใหม่  

[ptteppawong]

ขอบคุณครับ  สำหรับทุกความเห็น ....

ถามต่อนะครับ ......

สมมุติผมออกแบบหัวเว็บ   เพื่อการแสดงผลบน Desktop ที่ขนาด   1000 x 200px  

และผมออกแบบขนาดต่าง ๆ   อีก  3  ขนาด  เพื่อการแสดงผลบน tablet  และบนมือถือด้วย  

ใช้โค้ดตัวไหนเช็คครับ  ว่าถ้าเป็นอุปกรณ์แบบนี้ ให้แสดงผลหัวเว็บขนาดนี้มาแสดง    

ที่ต้องถามว่าใช้โค้ดอะไร   เพราะผมไม่เก่งเรื่องโค้ดครับ  ยังไงรบกวนด้วยครับ

ตัวอย่างการเขียน CSS แบบ Media Query ลองเอาไปประยุกต์ดูครับ

<style="text/css">
    .banner{margin:0 auto;}
    .banner-desktop{width:1000px; height:300px; background-color:blue; text-decoration:none;}
    .banner-tablet{width:640px; height:200px; background-color:purple; text-decoration:none;}
    .banner-mobile{width:320px; height:320px; background-color:green; text-decoration:none;}
    @media only screen and (min-width:1000px]){ /*แสดงผลบนหน้าจอ Desktop*/
         .banner{width:1000px;}
         .banner-desktop{display:block;}
         .banner-tablet{display:none;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:999px) and (min-width:640px){ /*แสดงผลบนหน้าจอ Tablet*/
         .banner{width:640px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:block;}
         .banner-mobile{display:none;}
    }
    @media only screen and (max-width:639px){ /*แสดงผลบนหน้าจอ Mobile*/
         .banner{width:320px;}
         .banner-desktop{display:none;}
         .banner-tablet{display:none;}
         .banner-mobile{display:block;}
    }
</style>

<div class="banner">
    <a class="banner-desktop" href="#"></a>
    <a class="banner-tablet" href="#"></a>
    <a class="banner-mobile" href="#"></a>
</div>

แล้วจะใส่ url ของภาพแทรกไว้ตรงโค้ดตำแหน่งไหนครับ....

เพิ่ม Tag Img ลงในส่วนของ HTML

<div class="banner">
     <a class="banner-desktop" href="#"><img src="banner-desktop.gif"/></a>
     <a class="banner-tablet" href="#"><img src="banner-tablet.gif"/></a>
     <a class="banner-mobile" href="#"><img src="banner-mobile.gif"/></a>
</div>

มันแสดงมาพร้อมกันหมดเลยครับ

http://xn--b3c3acw1an2b3b4a4ira.com/

โค้ด เลือก ขยาย

<style="text/css">
     .banner{margin:0 auto;}
     .banner-desktop{width:1000px; height:300px; display: block; background-color:blue; text-decoration:none;}
     .banner-tablet{width:640px; height:200px; display: none; background-color:purple; text-decoration:none;}
     .banner-mobile{width:320px; height:320px;display: none; background-color:green; text-decoration:none;}
     

     @media only screen and (max-width:980px){ /*แสดงผลบนหน้าจอ Tablet*/
          .banner-tablet{display:block;}
          .banner-desktop{display:none;}
          .banner-mobile{display:none;}
     }
     @media only screen and (max-width:480px){ /*แสดงผลบนหน้าจอ Mobile*/
          .banner-mobile{display:block;}
          .banner-desktop{display:none;}
          .banner-tablet{display:none;}
     }
</style>

ลอดูครับ

ขอบคุณมากครับ   ได้แล้วครับ 

ขอรบกวนอีกหน่อยนะครับ   ถ้าให้แสดงผลบนมือถือแบบแนวนอนล่ะครับ  ต้องเพิ่มโค้ดยังไงบ้างครับ....

[BakKheab]

สมัยนี้ใช้ tag <picture></picture> กันแล้วครับ ง่าย สะดวก ถูกหลักโครงสร้างสมัยใหม่  

แต่ไม่รองรับใน Browser รุ่นเก่าๆ นะครับ เพราะยังมีบาง user ที่ใช้ browser รุ่นเก่าอยู่ เช่น IE รุ่นเก่าๆ ก็ยังมีคนใช้อยู่นะครับ
ถ้าจะให้แสดงผลไดใน Browser เก่าๆ ก็ต้องใช้ Tag ที่ browser เข้าใจตรงกัน
หรือจะ import พวก javascript เข้ามาช่วย ก็เป็นอีกทางเลือกหนึ่ง (แต่อันนี้จะทำให้เว็บประมวลผลช้าลงอีก)
บางคนหันไปใช้ Bootstrap แทน แต่ Bootstrap เอง ก็ยังไม่รองรับ IE รุ่นที่ต่ำกว่า IE9

หลากหลายวิธี แต่ยังไงก็คงต้องคำนึงถึง USER เป็นหลัก เช่นเคย