ฟีเจอร์สื่อ

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

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

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

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

@media all
@media screen
@media print
@media speech

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

Browser Support

• 1
• 12
• 1
• 3

Source

มิติข้อมูลของวิวพอร์ต

ข้อความค้นหาสื่อที่ได้รับความนิยมสูงสุดบนเว็บคือข้อความค้นหาที่จัดการกับความกว้างของวิวพอร์ต แต่คุณก็ยังมีตัวเลือกอยู่ คุณสามารถใช้ฟีเจอร์สื่อ max-width เพื่อใช้รูปแบบกับหน้าเว็บที่มีความกว้างต่ำกว่าค่าที่กำหนด หรือใช้ฟีเจอร์สื่อ min-width เพื่อใช้รูปแบบกับหน้าเว็บที่มีความกว้างสูงกว่าค่าที่กำหนดก็ได้

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

เราชอบใช้ min-width ฉันใช้สไตล์เลย์เอาต์แบบเพิ่ม ฉันจะแนะนำกฎใหม่เกี่ยวกับเลย์เอาต์ที่จุดพักแต่ละจุดแทนที่จะยกเลิกกฎก่อนหน้า

วิธีการเพิ่มนี้ยังใช้กับส่วนสูงได้ด้วย เมื่อใช้ min-height คุณจะเพิ่มกฎได้เมื่อวิวพอร์ตมีระดับความสูงมากขึ้น เช่น คุณอาจมีองค์ประกอบส่วนหัวที่ต้องการยึดไว้ที่ด้านบนของหน้าต่างเบราว์เซอร์หากมีพื้นที่แนวตั้งเพียงพอ

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

แต่คุณใช้ฟีเจอร์สื่อ max-height ได้หากต้องการ ในส่วนนี้ ส่วนหัวจะยึดตามค่าเริ่มต้น แต่ระบบจะนำการยึดออกหากมีพื้นที่แนวตั้งไม่เพียงพอ

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

การเลือกระหว่างคำนำหน้า min- กับ max- ไม่ได้ใช้กับ width และ height เท่านั้น ฟีเจอร์สื่อ aspect-ratio ก็มีตัวเลือกเดียวกันนี้ นอกจากนี้ยังมีเวอร์ชันที่ไม่มีคำนำหน้าหากคุณต้องการใช้สไตล์ในอัตราส่วนความกว้างต่อความสูงที่แน่นอน

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

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

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

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

จอแสดงผล

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

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

คุณอาจไม่จําเป็นต้องใช้การค้นหาสื่อ resolution เลย โดยปกติแล้ว ความหนาแน่นของพิกเซลจะเป็นปัญหาเฉพาะกับรูปภาพเท่านั้น และรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาเป็นวิธีจัดการกับความหนาแน่นของพิกเซลใน HTML โดยตรง

ในทางกลับกัน CSS คือที่ที่คุณกำหนดภาพเคลื่อนไหวและการเปลี่ยน คุณสามารถปรับภาพเคลื่อนไหวและทรานซิชันเหล่านั้นให้ตอบสนองต่ออัตราการรีเฟรชที่แตกต่างกันได้โดยใช้ฟีเจอร์สื่อ update ฟีเจอร์สื่อนี้จะรายงานค่าใดค่าหนึ่งต่อไปนี้ none, slow และ fast

ค่า update เท่ากับ none หมายความว่าไม่มีอัตราการรีเฟรช ตัวอย่างเช่น หน้าเว็บที่พิมพ์แล้วจะอัปเดตไม่ได้

ค่า update เป็น slow หมายความว่าจอแสดงผลรีเฟรชได้ช้า จอแสดงผล E-Ink เป็นตัวอย่างหนึ่งของหน้าจอที่มีอัตราการรีเฟรชช้า

ค่า update เท่ากับ fast หมายความว่าจอแสดงผลรีเฟรชเร็วพอที่จะจัดการกับภาพเคลื่อนไหวและการเปลี่ยนฉาก

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

การแสดงผลบางแง่มุมไม่ได้เกี่ยวข้องกับความสามารถของฮาร์ดแวร์ ในโมดูลเกี่ยวกับธีม คุณได้ดูวิธีกำหนดพร็อพเพอร์ตี้ในไฟล์ Manifest ของเว็บแอป พร็อพเพอร์ตี้อย่างใดอย่างหนึ่งเรียกว่า display และคุณกําหนดค่าเป็น fullscreen, standalone, minimum-ui หรือ browser ได้ ฟีเจอร์สื่อ display-mode ที่เกี่ยวข้องช่วยให้คุณปรับแต่งสไตล์สำหรับตัวเลือกต่างๆ เหล่านี้ได้

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

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

สี

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

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

มีฟีเจอร์สื่อ color ที่เกี่ยวข้อง

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

สำหรับหน้าจอสี คุณสามารถเขียนข้อความค้นหาโดยใช้ฟีเจอร์สื่อ color-gamut, color-index หรือ dynamic-range โดยทั้งหมดจะรายงานรายละเอียดที่เฉพาะเจาะจงเกี่ยวกับความสามารถของสีของหน้าจอ

ในตัวอย่างนี้ ค่าสีจะอัปเดตตามฟีเจอร์สื่อ dynamic-range ซึ่งรายงานการรวมความสว่างสูงสุด ความลึกของสี และอัตราส่วนคอนทราสต์ของจอแสดงผล ค่าที่เป็นไปได้คือ standard หรือ high หน้าจอความละเอียดสูงที่รายงานค่า dynamic-range เป็น high จะได้รับพื้นที่สีอื่นโดยใช้ฟังก์ชัน CSS color() ใหม่

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

การโต้ตอบ

ฟีเจอร์สื่อยังรายงานประเภทของกลไกอินพุตที่ใช้โต้ตอบกับเว็บไซต์ได้ด้วย ได้แก่ hover, any-hover, pointer และ any-pointer ดูรายละเอียดเพิ่มเติมได้ที่ข้อบังคับเกี่ยวกับการโต้ตอบ

ค่ากำหนด

การค้นหาสื่อมีหลากหลายประเภทที่ช่วยให้คุณสามารถตอบสนองต่อความต้องการของผู้ใช้ได้ ได้แก่ prefers-color-scheme, prefers-contrast และ prefers-reduced-motion ดูรายละเอียดเพิ่มเติมได้ที่ข้อบังคับเกี่ยวกับธีมและการช่วยเหลือพิเศษ

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

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

ฟีเจอร์สื่อเพิ่มเติม

เราจะเพิ่มฟีเจอร์สื่ออื่นๆ เข้ามาอีก

ฟีเจอร์สื่อ forced-colors และ inverted-colors จะรายงานว่าอุปกรณ์ใช้ชุดสีที่จํากัดหรือชุดสีกลับหรือไม่

ฟีเจอร์สื่อ scripting จะช่วยให้คุณปรับ CSS ตามความพร้อมใช้งานของ JavaScript ได้

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

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

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

ทดสอบความรู้เกี่ยวกับฟีเจอร์สื่อ

คําค้นหาสื่อจะตรวจหาอุปกรณ์ที่มีขนาดความกว้างที่เฉพาะเจาะจง เช่น @media (width: 1024px) ได้ไหม

จริง

คุณจะระบุความกว้างที่เฉพาะเจาะจงได้โดยการค้นหาความกว้างที่มากกว่า 1023px และน้อยกว่า 1025px พร้อมกันเท่านั้น

เท็จ

min-width และ max-width พร้อมให้บริการ

การค้นหาสื่อจะตรวจหาอุปกรณ์ในaspect-ratioที่เฉพาะเจาะจงได้ไหม เช่น @media (aspect-ratio: 4/3)

จริง

อัตราส่วนเดียวจะจับคู่ได้เฉพาะกับอัตราส่วนเท่านั้น

เท็จ

ตัวเลือกนี้ใช้ได้กับ aspect-ratio

คิวรี่สื่อสีใดที่ถูกต้อง

@media (color)

เหมาะกับอุปกรณ์ทุกสี

@media (monochrome)

จับคู่กับอุปกรณ์ที่ไม่มีความสามารถในการแสดงสี

@media (color-gamut: srgb)

จับคู่กับอุปกรณ์ที่รองรับสี sRGB

@media (min-color-index: 15000)

จับคู่กับอุปกรณ์ที่มีสีอย่างน้อย 15,000 สี

@media (dynamic-range: high)

จับคู่กับอุปกรณ์ที่รองรับช่วงสี HD

คิวรีสื่อตามค่ากําหนดของผู้ใช้รายการใดต่อไปนี้ใช้งานได้

@media (prefers-color-scheme: dark)

ทำงานเมื่อผู้ใช้ตั้งค่าระบบปฏิบัติการเป็นโหมดมืด

@media (prefers-colors: high-definition)

ไม่ใช่ของจริง

@media (prefers-reduced-motion: reduce)

ตรงกับเมื่อผู้ใช้ตั้งค่าระบบปฏิบัติการให้ลดการเคลื่อนไหว

@media (prefers-contrast: more)

ตรงกับเมื่อผู้ใช้ตั้งค่าระบบปฏิบัติการให้มีคอนทราสต์สูง

@media (prefers-site-speed: fast)

ไม่ใช่ของจริง