CSS Responsive

CSS Responsive คืออะไร?

สิ่งหนึ่งที่สำคัญในการพัฒนาเว็บไซต์ก็คือการทำ Responsive เมื่อพูดถึงการทำ CSS Responsive ก็คือการใช้ media query ในการทำ interface ที่ตอบสนองกับอุปกรณ์หรือสิ่งต่างๆที่แตกต่างกันของผู้ใช้ เช่น โทรศัพท์, แท็ปเล็ต, เดสก์ทอป, นาฬิกา หรือแม้แต่ตู้เย็นที่มีหน้าจอ

Media Query

Media Query คืออะไรเราได้มีการแนะนำกันไปแล้วใน หัวข้อ Media Queries ในบทนี้ก็จะมาลงรายละเอียดการใช้งานอย่างละเอียด

Media Query

index.html

<style>
      .box {
        color: white;
        background-color: red;
      }
  @media (max-width: 300px) {
      .box {
          background-color: green;
      }
  }
</style>
<div class="box">ข้อความ</div>

<style>
      .box {
        color: white;
        background-color: red;
      }
  @media (max-width: 300px) {
      .box {
          background-color: green;
      }
  }
</style>
<div class="box">ข้อความ</div>

Result

ไวยากรณ์ @media เรียกว่า “at-rule” เป็นคำสั่งพิเศษของ CSS ที่ใช้เปลี่ยนพฤติกรรม ซึ่ง at-rule ก็มีหลายรูปแบบและทำหน้าที่แตกต่างกัน ตัวอย่างเช่น @keyframe ทำหน้าที่กำหนดการเคลื่อนไหวสำหรับ animation ได้

จากตัวอย่างจะใช้ Media Queries ในการกำหนดการเปลี่ยนแปลงเฉพาะตามเงื่อนไขที่กำหนด ในตัวอย่างนี้กำลังจะบอกว่า Element ที่มีคลาส box ควรมีพื้นหลังสีเขียว เมื่อ viewport มีความกว้าง 200px หรือน้อยกว่า

การใช้คุณสมบัติร่วมกัน

สังเกตุว่า ตัวอักศรสีขาวยังคงอยู่ เพราะเราสามารถรวมคุณสมบัติต่างๆ เข้าด้วยกันได้ เมื่อ viewport มีขนาด 200px หรือน้อยกว่า คุณสมบัติทั้งสองก็จะถูกนำมาใช้

Mobile-first หรือ Desktop-first?

ในการออกแบบเว็บไซต์ยุคปัจจุบัน คำถามนี้มักจะเกิดขึ้นบ่อยครั้ง โดยทั้งสองแนวทางมีข้อดีและข้อเสียต่างกัน

Mobile-first คือการออกแบบโดยเริ่มจากหน้าจอมือถือก่อน แล้วค่อยขยายไปสู่หน้าจอที่ใหญ่ขึ้น เหมาะสำหรับเว็บไซต์ที่กลุ่มผู้ใช้ส่วนใหญ่เข้าผ่านมือถือ ช่วยให้โฟกัสกับเนื้อหาที่สำคัญและประสบการณ์ผู้ใช้บนอุปกรณ์เคลื่อนที่
Desktop-first เริ่มจากการออกแบบสำหรับหน้าจอคอมพิวเตอร์ก่อน แล้วค่อยปรับให้เข้ากับหน้าจอเล็กลง เหมาะกับเว็บไซต์ที่มีฟีเจอร์ซับซ้อน หรือต้องแสดงข้อมูลจำนวนมาก

เลือกใช้อะไรดีระหว่าง Mobile-first หรือ Desktop-first?

หลายคนอาจจะกังวลเรื่องการเริ่มออกแบบด้วยหลักของ Mobile-first หรือ Desktop-first ก่อนดี แต่จริงๆ แล้วไม่มีคำตอบตายตัวว่าวิธีไหนดีกว่ากัน ทั้งนี้ "ขึ้นอยู่กับบริบท" และ "ความต้องการของโปรเจกต์นั้นๆ" หากเว็บไซต์ของคุณมีผู้ใช้งานส่วนใหญ่เข้าถึงผ่านมือถือ การเริ่มด้วย Mobile-first ก็อาจเป็นตัวเลือกที่เหมาะสม แต่ถ้าเป็นแอปพลิเคชันที่ต้องแสดงข้อมูลจำนวนมากและใช้งานบนเดสก์ท็อปเป็นหลัก Desktop-first ก็อาจเป็นแนวทางที่ดีกว่า สิ่งสำคัญคือต้องเข้าใจกลุ่มเป้าหมายและพฤติกรรมการใช้งานเป็นหลัก

Breakpoints

Breakpoint คือความกว้างเฉพาะของ viewport ที่จะช่วยแบ่งอุปกรณ์เป็นกลุ่ม ยกตัวอย่างเช่น เรากำหนด breakpoint ที่ 500px อุปกรณ์ใดก็ตามที่มีขนาดต่ำกว่า 500px จะถูกจัดกลุ่มเดียวกันให้อยู่ในกลุ่ม Mobile สมมุติว่าคนที่ใช้โทรศัทพ์ขนาดหน้าจอ 375px ก็จะเห็น layout เหมือนกับคนที่ใช้จอขนาด 425px

การเลือกใช้ค่า Breakpoint

จริงๆแล้วไม่มีค่าที่ถูกต้อง ส่วนใหญ่มักจะขึ้นอยู่กับการออกแบบและอุปกรณ์ที่ต้องการรองรับ แต่ก็มีวิธีเลือก Breakpoint ที่เหมาะสมอยู่

ยกตัวอย่าง iPhone ปัจจุบันมีขนาดหน้าจอ 393px หลายๆคนก็อาจจะกำหนด breakpoint เป็น 393px ไปเลย แต่ในความเป็นจริงยังมีอุปกรณ์ที่มีขนาดแต่ต่างกันออกไป เราคงไม่อยากกำหนดให้ทีละอุปกรณ์ใช่ไหม

ซึ่งการกำหนดที่แนะนำก็คือจุด Breakpoint ที่ไม่มีการใช้งาน เพื่อให้ครอบคลุมอุปกรณ์ที่คล้ายกันสามารถเห็น layout เดียวกันได้

สามารถดูข้อมูลความนิยมในการใช้ขนาดหน้าจอของแต่ละอุปกรณ์ได้ที่ StatCounter

การใช้งาน Breakpoint

การใช้งานจะขึ้นอยู่การหลักการที่เราเลือกใช้ในการออกแบบระหว่าง mobile-first กับ desktop-first

ตัวอย่างของ Mobile-first:

Loading...

ตัวอย่างของ Desktop-first:

Loading...

สามารถลองเข้าไปดูตัวอย่างได้ที่ Example CSS Responsive