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

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

การค้นหาสื่อจะเริ่มต้นด้วยคีย์เวิร์ด @media (ที่ไม่มีกฎ 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 สองบรรทัดนี้ยังเทียบเท่ากันอีกด้วย

<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.
}

นอกจากนี้คุณยังรวมคิวรี่สื่อเพื่อใช้เงื่อนไขได้มากกว่า 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;
  }
}

ชุดค่าผสม

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

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

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

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

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

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

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

จริง

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

false

🎉

หน้าจอเป็นที่เดียวที่ใช้หรือแสดงเนื้อหาบนเว็บใช่หรือไม่

จริง

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

false

🎉

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

screen

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

none

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

all

🎉

some

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

landscape

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

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

width: 100%

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

font-size: 200%

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

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

🎉

Query สำหรับ Media

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

HTML5

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

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

@media (width: 720px)

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

@media (max-width: 720px)

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

@media (min-width: 720px)

🎉 คุณอ่านข้อความนี้ได้เพราะหน้าต่างเบราว์เซอร์มีขนาดอย่างน้อย 720px

@media (clamp-width: 720px)

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