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

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

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

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

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

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

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

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

คุณสามารถใช้กฎ at @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 อาจไม่มีปัญหา แต่การใช้สไตล์ชีตแยกต่างหากสำหรับคิวรีสื่อทุกประเภทอาจไม่ใช่ความคิดที่ดี ให้ใช้แอตทริบิวต์ @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 และสูง 60em เป็นอย่างน้อย จึงจะใช้รูปแบบคอลัมน์ได้ โดยระบบเลือกเบรกพอยท์เหล่านั้นตามจำนวนเนื้อหา

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

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

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

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

คิวรีสื่อมีไว้สําหรับขนาดหน้าจอเท่านั้นใช่ไหม

จริง

ลองอีกครั้งนะ การค้นหาสื่อสำหรับสิ่งต่างๆ เช่น สิ่งพิมพ์ ค่ากำหนดระบบแบบมืดและแบบสว่าง และอื่นๆ อีกมากมาย

เท็จ

🎉

หน้าจอเป็นที่เดียวที่มีการบริโภคหรือแสดงเนื้อหาเว็บ

จริง

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

เท็จ

🎉

ประเภทสื่อเริ่มต้นคือ

screen

ลองอีกครั้งนะ screen ไม่ใช่ประเภทเริ่มต้น

none

ลองอีกครั้งนะ none ไม่ใช่ประเภทสื่อที่ถูกต้อง

all

🎉

some

ลองอีกครั้งนะ some ไม่ใช่ประเภทสื่อที่ถูกต้อง

landscape

ลองอีกครั้งนะ landscape ไม่ใช่ประเภทสื่อที่ถูกต้อง

คุณจะใช้อะไรเพื่อป้องกันไม่ให้เบราว์เซอร์ปรับขนาดการออกแบบในอุปกรณ์เคลื่อนที่

width: 100%

ลองอีกครั้งนะ

font-size: 200%

ลองอีกครั้งนะ

<meta name="viewport" content="width=device-width, initial-scale=1">

🎉

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

ลองอีกครั้งนะ

HTML5

ลองอีกครั้งนะ

คิวรีสื่อที่ใช้เมื่อหน้าต่างเบราว์เซอร์สูงกว่า 720px

@media (width: 720px)

ลองอีกครั้งนะ การค้นหาสื่อนี้จะเกิดขึ้นเมื่อหน้าต่างเบราว์เซอร์เท่ากับ 720px เท่านั้น

@media (max-width: 720px)

ลองอีกครั้งนะ คิวรี่สื่อนี้ใช้เมื่อหน้าต่างเบราว์เซอร์ต่ำกว่า 720px

@media (min-width: 720px)

🎉 คุณอาจมองว่าจำนวนนี้เป็นค่าที่หน้าต่างเบราว์เซอร์มีขนาดอย่างน้อย 720px

@media (clamp-width: 720px)

ลองอีกครั้งนะ clamp-width ไม่ใช่เงื่อนไขฟีเจอร์การค้นหาสื่อที่ถูกต้อง