สรุปวิธีการทั้งหมดที่ฟีเจอร์สื่อช่วยให้คุณตอบสนองต่ออุปกรณ์และ การตั้งค่าเริ่มต้น
การออกแบบที่ตอบสนองตามอุปกรณ์คงเป็นไปไม่ได้หากไม่มีคิวรี่สื่อ ก่อนการค้นหาสื่อ เราไม่มีทางรู้ว่าผู้คนใช้อุปกรณ์ประเภทใดในการเข้าชมเว็บไซต์ นักออกแบบต้องตั้งสมมติฐานขึ้นมา สมมติฐานเหล่านี้ได้รับการเข้ารหัสเป็นการออกแบบที่มีความกว้างคงที่หรือเลย์เอาต์แบบของเหลว
แต่การใช้คำค้นหาสื่อก็เปลี่ยนแปลงไปด้วย นี่เป็นครั้งแรกที่นักออกแบบได้พบปะกับผู้คนครึ่งทาง นักออกแบบสามารถปรับเลย์เอาต์ให้ตอบสนองต่ออุปกรณ์ของผู้คนได้
อย่าลืมว่าคิวรี่สื่อประกอบด้วยประเภทสื่อที่ไม่บังคับและฟีเจอร์สื่อที่บังคับ ประเภทสื่อไม่มีการเปลี่ยนแปลงมากนักในช่วงหลายปีที่ผ่านมา ยังมีค่าที่เป็นไปได้เพียง 4 ค่าดังนี้
@media all
@media screen
@media print
@media speech
ในทางกลับกัน ฟีเจอร์สื่อได้ขยายไปอย่างมาก ตอนนี้นักออกแบบสามารถเข้าถึงผู้ใช้ได้เกินครึ่งทางแล้ว ซึ่งจะปรับการออกแบบให้พอดีกับขนาดหน้าจอ
ขนาดของวิวพอร์ต
โดยที่ผ่านมา คำค้นหาสื่อบนเว็บที่ได้รับความนิยมมากที่สุดคือคำค้นหาที่เกี่ยวข้องกับความกว้างของวิวพอร์ต แต่ถึงอย่างไร คุณยังมีตัวเลือกอยู่ คุณสามารถใช้ฟีเจอร์สื่อของ 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
resolution
มี 3 รูปแบบเช่นเดียวกับ aspect-ratio
ได้แก่ ต่ำสุด สูงสุด และตรงทั้งหมด
@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
ฟีเจอร์สื่อนี้จะรายงานค่าใดค่าหนึ่งจาก 3 ค่า ซึ่งได้แก่ none
, slow
และ fast
ค่า update
ของ none
หมายความว่าไม่มีอัตราการรีเฟรช ตัวอย่างเช่น หน้าที่พิมพ์จะไม่สามารถอัปเดตได้
ค่า update
ของ slow
หมายความว่าหน้าจอรีเฟรชช้า การแสดงผลแบบอิเล็กทรอนิกส์เป็นตัวอย่างหนึ่งของหน้าจอที่มีอัตราการรีเฟรชช้า
ค่า 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
จะได้รับพื้นที่สีที่ต่างออกไปโดยใช้ฟังก์ชัน color()
ใหม่ของ CSS
.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)
ได้ใช่ไหม
คำค้นหาสื่อสามารถตรวจสอบอุปกรณ์ใน aspect-ratio
ที่เจาะจง เช่น @media (aspect-ratio: 4/3)
ได้ไหม
คำค้นหาสื่อสีที่ถูกต้องคืออะไร
@media (color-gamut: srgb)
@media (dynamic-range: high)
@media (color)
@media (min-color-index: 15000)
@media (monochrome)
คิวรี่สื่อตามค่ากำหนดของผู้ใช้ข้อใดต่อไปนี้ถูกต้อง
@media (prefers-reduced-motion: reduce)
@media (prefers-contrast: more)
@media (prefers-color-scheme: dark)
@media (prefers-site-speed: fast)
@media (prefers-colors: high-definition)