กฎ @media ที่นำมาใช้ใน CSS2 ทำให้สามารถกำหนดกฎสไตล์ที่แตกต่างกันสำหรับสื่อประเภทต่างๆ ได้
ตัวอย่าง: คุณสามารถมีกฎรูปแบบสำหรับหน้าจอคอมพิวเตอร์ได้หนึ่งชุด และอีกชุดหนึ่งสำหรับ เครื่องพิมพ์หนึ่งเครื่องสำหรับอุปกรณ์พกพาหนึ่งเครื่องสำหรับอุปกรณ์ประเภทโทรทัศน์และอื่นๆ
น่าเสียดายที่สื่อประเภทเหล่านี้ไม่ได้รับการสนับสนุนจากอุปกรณ์อื่นๆ มากนัก มากกว่าประเภทสื่อสิ่งพิมพ์
การสืบค้นสื่อใน CSS3 ได้ขยายแนวคิดประเภทสื่อ CSS2: แทนที่จะมองหาประเภทของอุปกรณ์ พวกเขาดูที่ความสามารถของ อุปกรณ์.
ข้อความค้นหาสื่อสามารถใช้เพื่อตรวจสอบสิ่งต่างๆ มากมาย เช่น:
ความกว้างและความสูงของวิวพอร์ต
ความกว้างและความสูงของอุปกรณ์
การวางแนว (แท็บเล็ต/โทรศัพท์อยู่ในโหมดแนวนอนหรือแนวตั้งหรือไม่)
ปณิธาน
การใช้คำสั่งสื่อเป็นเทคนิคยอดนิยมสำหรับการนำเสนอสไตล์ที่ปรับให้เหมาะสม ไปยังเดสก์ท็อป แล็ปท็อป แท็บเล็ต และโทรศัพท์มือถือ (เช่น โทรศัพท์ iPhone และ Android)
ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่สนับสนุนกฎ @media อย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
คิวรีสื่อประกอบด้วยประเภทสื่อและสามารถมีได้ตั้งแต่หนึ่งรายการขึ้นไป นิพจน์ซึ่งแก้ไขเป็นจริงหรือเท็จ
@media not|only mediatype and (expressions) {
CSS-Code;
}ผลลัพธ์ของการสืบค้นก็คือ เป็นจริงหากประเภทสื่อสิ่งพิมพ์ที่ระบุตรงกับประเภทอุปกรณ์ที่เอกสารเป็น กำลังแสดงอยู่และนิพจน์ทั้งหมดในคิวรีสื่อเป็นจริง เมื่อแบบสอบถามสื่อเป็นจริง สไตล์ชีตหรือกฎสไตล์ที่สอดคล้องกันก็จะเป็นเช่นนั้น นำไปใช้ตามกฎการเรียงซ้อนปกติ
เว้นแต่ว่าคุณใช้ตัวดำเนินการ not หรือ only เท่านั้น ประเภทสื่อจะเป็นทางเลือกและ ประเภท ทั้งหมด จะถูกนำไปใช้โดยนัย
คุณยังสามารถมีสไตล์ชีตที่แตกต่างกันสำหรับสื่อต่างๆ ได้:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">ใช้สำหรับอุปกรณ์ประเภทมีเดียทั้งหมด
ใช้สำหรับเครื่องพิมพ์
ใช้สำหรับหน้าจอคอมพิวเตอร์ แท็บเล็ต สมาร์ทโฟน ฯลฯ
ใช้สำหรับโปรแกรมอ่านหน้าจอที่ "อ่าน" หน้าเว็บออกเสียง
วิธีหนึ่งในการใช้คำสั่งสื่อคือการมีส่วน CSS สำรองภายในสไตล์ชีตของคุณ
ตัวอย่างต่อไปนี้เปลี่ยนสีพื้นหลังเป็นสีเขียวอ่อนหาก วิวพอร์ตมีความกว้าง 480 พิกเซลหรือกว้างกว่า (หากวิวพอร์ตน้อยกว่า 480 พิกเซล สีพื้นหลังจะเป็นสีชมพู):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
ตัวอย่างต่อไปนี้แสดงเมนูที่จะลอยไปทางด้านซ้ายของหน้าหาก วิวพอร์ตมีความกว้าง 480 พิกเซลหรือกว้างกว่า (หากวิวพอร์ตน้อยกว่า 480 พิกเซล เมนูจะอยู่ด้านบนของเนื้อหา):
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
</body>
</html>
หากต้องการตัวอย่างเพิ่มเติมเกี่ยวกับการสืบค้นสื่อ ให้ไปที่หน้าถัดไป: ตัวอย่าง CSS MQ
สำหรับภาพรวมทั้งหมดของสื่อทุกประเภทและคุณสมบัติ/การแสดงออก โปรดดูที่ กฎ @media ในการอ้างอิง CSS ของเรา