นักออกแบบสามารถปรับดีไซน์ให้เหมาะกับผู้ใช้ ตัวอย่างที่ชัดเจนที่สุดของอุปกรณ์นี้คือรูปแบบของอุปกรณ์ของผู้ใช้ ความกว้างของฟีด สัดส่วนภาพของอุปกรณ์ และอื่นๆ การใช้คำสืบค้นสื่อจะช่วยให้นักออกแบบสามารถตอบสนองต่อรูปแบบของอุปกรณ์ที่แตกต่างกันเหล่านี้ได้
การค้นหาสื่อจะเริ่มด้วยคีย์เวิร์ด @media (กฎ CSS at) และใช้ได้กับกรณีการใช้งานที่หลากหลาย
กำหนดเป้าหมายเอาต์พุตประเภทต่างๆ
เว็บไซต์มักแสดงบนหน้าจอ แต่ 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
จะมีค่าประเภทสื่อเป็น 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.
}
นอกจากนี้ คุณยังสามารถรวมคิวรี่สื่อเพื่อใช้เงื่อนไขมากกว่าหนึ่งข้อได้
ใช้คำว่า 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;
}
}
ชุดค่าผสม
คุณสามารถใช้คิวรี่สื่อตามความสูงของวิวพอร์ต ไม่ใช่เฉพาะความกว้าง ซึ่งอาจมีประโยชน์สำหรับการเพิ่มประสิทธิภาพเนื้อหาอินเทอร์เฟซ "ครึ่งหน้าบน" ในตัวอย่างก่อนหน้านี้ หากผู้อ่านใช้หน้าต่างเบราว์เซอร์ที่กว้างแต่สั้น ผู้ใช้จำเป็นต้องเลื่อนลงไป 1 คอลัมน์ จากนั้นเลื่อนกลับขึ้นไปที่ด้านบนของคอลัมน์ที่ 2 การใช้คอลัมน์เฉพาะเมื่อวิวพอร์ตกว้างและสูงพอก็จะช่วยได้ง่ายกว่า
คุณสามารถรวมคิวรี่สื่อเพื่อใช้รูปแบบเฉพาะเมื่อเงื่อนไขทั้งหมดเป็นจริงเท่านั้น
ในตัวอย่างนี้ วิวพอร์ตต้องกว้าง 50em และสูง 60em เป็นอย่างน้อย จึงจะใช้รูปแบบคอลัมน์ได้
โดยระบบเลือกเบรกพอยท์เหล่านั้นตามจำนวนเนื้อหา
@media (min-width: 50em) and (min-height: 60em) {
article {
column-count: 2;
}
}
ตัวอย่างเหล่านี้แสดงวิธีใช้คิวรี่สื่อเพื่อปรับการออกแบบให้เข้ากับรูปแบบอุปกรณ์ของผู้ใช้ แต่สิ่งเหล่านี้ก็เป็นรอย แห่งความเป็นไปได้ คิวรี่สื่ออาจไปไกลกว่าความกว้างและความสูง เข้าถึงค่ากําหนดของผู้ใช้สําหรับฟีเจอร์การช่วยเหลือพิเศษและสีของธีม การใช้คำสืบค้นสื่อเพื่อปรับเลย์เอาต์เป็นจุดเริ่มต้นที่ดีของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งต่อยอดมาจากฟีเจอร์เหล่านี้และอื่นๆ อีกมากมาย
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับคิวรี่สื่อที่ปรับเปลี่ยนตามอุปกรณ์
หากมีคำค้นหาสื่อสำหรับขนาดหน้าจอเท่านั้น
หน้าจอเป็นที่เดียวที่มีการบริโภคหรือแสดงเนื้อหาเว็บ
ประเภทสื่อเริ่มต้นคือ
screenscreen ไม่ใช่ประเภทเริ่มต้นnonenone ไม่ใช่ประเภทสื่อที่ถูกต้องallsomesome ไม่ใช่ประเภทสื่อที่ถูกต้องlandscapelandscape ไม่ใช่ประเภทสื่อที่ถูกต้องคุณจะใช้อะไรเพื่อป้องกันไม่ให้เบราว์เซอร์ปรับขนาดการออกแบบบนอุปกรณ์เคลื่อนที่
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1">คำค้นหาสื่อใดจะมีผลเมื่อหน้าต่างเบราว์เซอร์อยู่สูงกว่า 720px
@media (width: 720px)720px เท่านั้น@media (max-width: 720px)720px@media (min-width: 720px)720px@media (clamp-width: 720px)clamp-width ไม่ใช่เงื่อนไขของฟีเจอร์คิวรี่สื่อที่ถูกต้อง