Media Query

Media Query คืออะไร

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

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

แนวคิดของ Media Queries คล้ายกับเงื่อนไข if ใน JavaScript ก็คือ "ถ้าหน้าจอมีขนาดเป็นอย่างนี้ ให้ใช้การตกแต่งแบบนี้" ซึ่งช่วยให้เว็บไซต์สามารถปรับตัวและตอบสนองกับอุปกรณ์ที่หลากหลายได้อย่างมีประสิทธิภาพ

โครงสร้างพื้นฐานของ Media Queries

Media Queries เป็นคุณสมบัติของ CSS ที่ช่วยให้เราสามารถกำหนดสไตล์ที่แตกต่างกันตามขนาดหน้าจอ โดยใช้ไวยากรณ์ @media ซึ่งสามารถเปรียบเทียบได้กับคำสั่ง if ใน JavaScript เช่น:

Loading...

Loading...

รูปแบบการเขียนเบื้องต้น

Loading...

ในตัวอย่างนี้ หากหน้าต่างมีความกว้างระหว่าง 0px ถึง 300px สไตล์ภายในจะถูกนำไปใช้ ซึ่งช่วยให้เราสามารถปรับแต่งการแสดงผลให้เหมาะสมกับอุปกรณ์ที่ผู้ใช้ใช้งาน

การเขียนเงื่อนไขที่ถูกต้อง

ในวงเล็บโดยส่วนใหญ่แล้วจะใช้ max-width กับ min-width ซึ่ง 2 อันนี้ก็จะมีความแตกต่างดังนี้ :

1. max-width

ใช้สำหรับกำหนดเงื่อนไขการแสดงผลบนหน้าจอที่มีขนาดไม่เกินค่าที่กำหนด
ตัวอย่าง: @media (max-width: 300px) จะใช้สไตล์เมื่อหน้าจอมีความกว้างไม่เกินหรือน้อยกว่า 300px

2. min-width

ใช้สำหรับกำหนดเงื่อนไขการแสดงผลบนหน้าจอที่มีขนาดตั้งแต่ค่าที่กำหนดขึ้นไป
ตัวอย่าง: @media (min-width: 300px) จะใช้สไตล์เมื่อหน้าจอมีความกว้างตั้งแต่ 300px ขึ้นไป

CSS Property และ Media Property ไม่เหมือนกัน

ในการเขียน Media query max-width เป็น คุณสมบัติของ Media เท่านั้น ไม่ใช่คุณสมบัติของ CSS หรือ CSS Property แค่ใช้ชื่อเหมือนกันเท่านั้น สามารถดูคุณสมบัติเพิ่มเติมของ Media ได้ที่นี่

ตัวอย่างการใช้งานจริง

ในการใช้งาน Media Queries ทั่วไปที่เราเห็นกันก็จะเป็นการแสดงเนื้อหาที่แตกต่างกันตามขนาดของหน้าจอ

ในตัวอย่างนี้เราจะเห็นแค่หนึ่งใน HTML element เหล่านี้ในเวลาเดียวกัน

Media Queries เบื้องต้น

index.html

<style>
      .large-screens {
          display: none;
      }

      @media (min-width: 300px) {
          .large-screens {
          display: block;
      }
      .small-screens {
          display: none;
      }
  }

</style>
<div class="large-screens">
  ข้อความนี้จะปรากฏเฉพาะในหน้าจอขนาดใหญ่
</div>
<div class="small-screens">
  ในขณะเดียวกัน ข้อความนี้จะปรากฏเฉพาะในหน้าจอขนาดเล็ก
</div>

<style>
      .large-screens {
          display: none;
      }

      @media (min-width: 300px) {
          .large-screens {
          display: block;
      }
      .small-screens {
          display: none;
      }
  }

</style>
<div class="large-screens">
  ข้อความนี้จะปรากฏเฉพาะในหน้าจอขนาดใหญ่
</div>
<div class="small-screens">
  ในขณะเดียวกัน ข้อความนี้จะปรากฏเฉพาะในหน้าจอขนาดเล็ก
</div>

Result

เราใช้ CSS Property display: none เพื่อซ่อน element ที่เราไม่ต้องการให้แสดงผล จากตัวอย่างข้างต้น หากหน้าจอมีความกว้างตั้งแต่ 300px ขึ้นไป ข้อความที่อยู่ในคลาส large-screens จะปรากฏ และข้อความที่อยู่ในคลาส small-screens จะถูกซ่อนไว้

ถ้าขนาดหน้าจอมีความกว้างน้อยกว่า 300px ข้อความที่อยู่ในคลาส small-screens จะปรากฏและข้อความที่อยู่ในคลาส large-screens จะถูกซ่อนไว้

ทำไม คลาส small-screens ไม่มีการกำหนด display: block; ในตอนแรก ?

โดยทั่วไปคุณสมบัติ display: block; จะถูกใช้เป็นค่าเริ่มต้นของ element ที่เราสร้างขึ้น ดังนั้นเราไม่จำเป็นต้องกำหนด display: block; ให้กับคลาส small-screens ในกรณีนี้

ในหัวข้อ CSS Responsive จะเป็นการลงรายละเอียดเพิ่มเติมเกี่ยวกับการใช้งาน Media Queries ในการออกแบบเว็บไซต์ให้เหมาะสมกับทุกขนาดหน้าจอ