นักออกแบบจะปรับการออกแบบให้รองรับผู้ใช้ได้ ตัวอย่างที่ชัดเจนที่สุดคือรูปแบบของอุปกรณ์ของผู้ใช้ เช่น ความกว้าง สัดส่วนภาพของอุปกรณ์ และอื่นๆ ด้วยการใช้คำค้นหาสื่อ ผู้ออกแบบจะสามารถตอบสนองต่อรูปแบบของอุปกรณ์ต่างๆ เหล่านี้ได้
การค้นหาสื่อจะเริ่มต้นด้วยคีย์เวิร์ด @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;
}
}
ตัวอย่างเหล่านี้แสดงให้เห็นว่าสามารถใช้คำค้นหาสื่อเพื่อปรับการออกแบบให้เข้ากับรูปแบบของอุปกรณ์ของผู้ใช้ได้อย่างไร แต่นี่เป็นเพียงจุดเริ่มต้นที่เป็นไปได้ การค้นหาสื่อมีมากกว่าความกว้างและความสูง โดยสามารถเข้าถึงค่ากำหนดของผู้ใช้สำหรับฟีเจอร์การช่วยเหลือพิเศษและสีของธีม การใช้คำค้นหาสื่อเพื่อปรับเลย์เอาต์เป็นจุดเริ่มต้นที่ดีสำหรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งจะต่อยอดจากฟีเจอร์เหล่านี้และอีกมากมาย
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับคิวรี่สื่อที่ปรับเปลี่ยนตามอุปกรณ์
มีคำค้นหาสื่อสำหรับขนาดหน้าจอเท่านั้นใช่ไหม
หน้าจอเป็นที่เดียวที่ใช้หรือแสดงเนื้อหาบนเว็บใช่หรือไม่
ประเภทสื่อเริ่มต้นคือ
screen
screen
ไม่ใช่ประเภทเริ่มต้นnone
none
ไม่ใช่ประเภทสื่อที่ถูกต้องall
some
some
ไม่ใช่ประเภทสื่อที่ถูกต้องlandscape
landscape
ไม่ใช่ประเภทสื่อที่ถูกต้องคุณจะใช้สิ่งใดเพื่อป้องกันไม่ให้เบราว์เซอร์ปรับขนาดการออกแบบบนอุปกรณ์เคลื่อนที่
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
ไม่ใช่เงื่อนไขฟีเจอร์คิวรี่สื่อที่ถูกต้อง