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