การค้นหาสื่อ

นักออกแบบสามารถปรับการออกแบบให้เหมาะกับผู้ใช้ได้ ตัวอย่างที่ชัดเจนที่สุดคือรูปแบบของอุปกรณ์ของผู้ใช้ ความกว้าง สัดส่วนภาพของอุปกรณ์ และด้านอื่นๆ ดีไซเนอร์สามารถตอบสนองต่อรูปแบบอุปกรณ์ที่แตกต่างกันเหล่านี้ได้โดยใช้การค้นหาสื่อ

Media Queries จะเริ่มต้นด้วยคีย์เวิร์ด @media (กฎ @ ของ CSS) และใช้ได้กับ Use Case ที่หลากหลาย

กำหนดเป้าหมายเอาต์พุตประเภทต่างๆ

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

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

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

คุณสามารถใช้กฎ @ ในชีตสไตล์ได้ดังนี้ หรือจะสร้างชีตสไตล์แยกต่างหากและใช้แอตทริบิวต์ media ในองค์ประกอบ link ก็ได้@media

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

หากคุณไม่ได้ระบุประเภทสื่อสำหรับ CSS ระบบจะกำหนดค่าประเภทสื่อเป็น all โดยอัตโนมัติ บล็อก CSS 2 บล็อกนี้มีความหมายเหมือนกัน

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

HTML 2 บรรทัดนี้ยังเทียบเท่ากันด้วย

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

เงื่อนไขการค้นหา

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

ไวยากรณ์สำหรับคิวรี่สื่อมีดังนี้

@media type and (feature)

คุณใช้การค้นหาสื่อในองค์ประกอบ link ได้หากรูปแบบอยู่ในชีตสไตล์แยกต่างหาก

<link rel="stylesheet" href="specific.css" media="type and (feature)">

สมมติว่าคุณต้องการใช้รูปแบบที่แตกต่างกันโดยขึ้นอยู่กับว่าหน้าต่างเบราว์เซอร์อยู่ในโหมดแนวนอน (ความกว้างของวิวพอร์ตมากกว่าความสูง) หรือโหมดแนวตั้ง (ความสูงของวิวพอร์ตมากกว่าความกว้าง) คุณใช้ฟีเจอร์สื่อที่ชื่อ orientation เพื่อทดสอบได้

@media all and (orientation: landscape) {
   /* Styles for landscape mode. */
}

@media all and (orientation: portrait) {
   /* Styles for portrait mode. */
}

หรือหากต้องการใช้สไตล์ชีตแยกต่างหาก ให้ทำดังนี้

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

ในกรณีนี้ ประเภทสื่อคือ all คุณจะละเว้นค่านี้ไว้ก็ได้เนื่องจากเป็นค่าเริ่มต้น

@media (orientation: landscape) {
   /* Styles for landscape mode. */
}

@media (orientation: portrait) {
   /* Styles for portrait mode. */
}

หรือใช้สไตล์ชีตแยกต่างหาก

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

แม้ว่าการใช้สไตล์ชีตแยกต่างหากสำหรับประเภทสื่อต่างๆ เช่น print อาจใช้ได้ แต่การใช้สไตล์ชีตแยกต่างหากสำหรับการค้นหาสื่อทุกรายการอาจไม่ใช่ความคิดที่ดี โปรดใช้กฎ @ @media แทน

ปรับรูปแบบตามขนาดวิวพอร์ต

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

@media (min-width: 400px) {
  /* Styles for viewports wider than 400 pixels. */
}

ใช้max-widthฟีเจอร์สื่อเพื่อใช้รูปแบบที่ความกว้างต่ำกว่าที่กำหนด ดังนี้

@media (max-width: 400px) {
  /* Styles for viewports narrower than 400 pixels. */
}

คุณยังเขียน Media Query นี้ได้โดยใช้ฟีเจอร์สื่อ width และโอเปอเรเตอร์น้อยกว่าหรือเท่ากับ

@media (width <= 400px) {
  /* Styles for viewports narrower than 400 pixels. */
}

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

@media (min-width: 25em) {
  /* Styles for viewports wider than 25em. */
}

นอกจากนี้ คุณยังรวม Media Query เพื่อใช้เงื่อนไขมากกว่า 1 รายการได้ด้วย ใช้คำว่า and เพื่อรวม Media Query

@media (min-width: 50em) and (max-width: 60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. /*
}

นอกจากนี้ยังเขียนโดยใช้ไวยากรณ์ช่วงได้ด้วย

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

เลือกเบรกพอยต์ตามเนื้อหา

จุดที่เงื่อนไขฟีเจอร์สื่อกลายเป็นจริงเรียกว่าเบรกพอยท์ คุณควรเลือกเบรกพอยต์ตามเนื้อหาของคุณแทนที่จะเลือกตามขนาดอุปกรณ์ยอดนิยม เนื่องจากขนาดอุปกรณ์อาจเปลี่ยนแปลงได้ทุกครั้งที่มีการเปิดตัวเทคโนโลยีใหม่

ในตัวอย่างนี้ 50em คือจุดที่บรรทัดข้อความยาวเกินไป เราจึงสร้างจุดพักเพื่อให้อ่านอินเทอร์เฟซได้ง่ายขึ้น เมื่อใช้พร็อพเพอร์ตี้ column-count ข้อความจะแบ่งออกเป็น 2 คอลัมน์นับจากจุดนั้นเป็นต้นไป

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

ชุดค่าผสม

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

คุณสามารถรวม Media Query เพื่อให้สไตล์มีผลเมื่อเงื่อนไขทั้งหมดเป็นจริงเท่านั้น ในตัวอย่างนี้ วิวพอร์ตต้องกว้างอย่างน้อย 50em และสูง 30em จึงจะใช้สไตล์คอลัมน์ได้ เราเลือกจุดพักเหล่านี้ตามปริมาณเนื้อหา

@media (min-width: 50em) and (min-height: 30em) {
  article {
    column-count: 2;
  }
}

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

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

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

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับ Media Query ที่ตอบสนองตามอุปกรณ์