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

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

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

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

เว็บไซต์มักแสดงบนหน้าจอ แต่ 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 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 อาจไม่มีปัญหา แต่การใช้สไตล์ชีตแยกต่างหากสำหรับคิวรีสื่อทุกประเภทอาจไม่ใช่ความคิดที่ดี ให้ใช้กฎ 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;
  }
}

ชุดค่าผสม

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

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

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

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

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

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