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

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

การค้นหาสื่อจะเริ่มด้วยคีย์เวิร์ด @media (กฎ CSS at) และใช้ได้กับกรณีการใช้งานที่หลากหลาย

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

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

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

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

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

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

<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 สองบรรทัดนี้เทียบเท่ากัน:

<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 อาจใช้งานได้ คุณไม่ควรใช้สไตล์ชีตแยกต่างหากสำหรับคำค้นหาสื่อทุกรายการ ให้ใช้กฎ at @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.
}

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

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

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

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

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

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

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

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

ชุดค่าผสม

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

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

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

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

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

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