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

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

การค้นหาสื่อจะเริ่มด้วยคีย์เวิร์ด @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.
}

นอกจากนี้ คุณยังสามารถรวมคิวรี่สื่อเพื่อใช้เงื่อนไขมากกว่าหนึ่งข้อได้ ใช้คำว่า 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 การใช้คอลัมน์เฉพาะเมื่อวิวพอร์ตกว้างและสูงพอก็จะช่วยได้ง่ายกว่า

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

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

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

ตรวจสอบความเข้าใจ

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