CSS @media Rule
ตัวอย่าง
เปลี่ยนสีพื้นหลังขององค์ประกอบ <body> เป็น "lightblue" เมื่อหน้าต่างเบราว์เซอร์กว้าง 600px หรือน้อยกว่า:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
กฎ@mediaนี้ใช้ในคิวรีสื่อเพื่อใช้สไตล์ที่แตกต่างกันสำหรับประเภท/อุปกรณ์สื่อต่างๆ
แบบสอบถามสื่อสามารถใช้เพื่อตรวจสอบสิ่งต่างๆ เช่น:
- ความกว้างและความสูงของวิวพอร์ต
- ความกว้างและความสูงของตัวเครื่อง
- การวางแนว (แท็บเล็ต/โทรศัพท์อยู่ในโหมดแนวนอนหรือแนวตั้งหรือไม่)
- ปณิธาน
การใช้ข้อความค้นหาสื่อเป็นเทคนิคยอดนิยมสำหรับการนำเสนอสไตล์ชีต (การออกแบบเว็บที่ตอบสนองตามอุปกรณ์) ที่ปรับแต่งมาโดยเฉพาะไปยังเดสก์ท็อป แล็ปท็อป แท็บเล็ต และโทรศัพท์มือถือ
คุณยังสามารถใช้คิวรีสื่อเพื่อระบุว่าสไตล์บางอย่างมีไว้สำหรับเอกสารที่พิมพ์หรือสำหรับโปรแกรมอ่านหน้าจอเท่านั้น (ประเภทสื่อ: การพิมพ์ หน้าจอ หรือคำพูด)
นอกจากประเภทสื่อแล้ว ยังมีคุณสมบัติสื่ออีกด้วย ฟีเจอร์สื่อให้รายละเอียดที่เฉพาะเจาะจงมากขึ้นในการสืบค้นสื่อ โดยอนุญาตให้ทดสอบคุณสมบัติเฉพาะของตัวแทนผู้ใช้หรืออุปกรณ์แสดงผล ตัวอย่างเช่น คุณสามารถใช้สไตล์กับหน้าจอที่มีขนาดใหญ่กว่าหรือเล็กกว่าความกว้างที่กำหนดเท่านั้น
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนกฎ @media อย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
ไวยากรณ์ CSS
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
ความหมายของnot only และและคีย์เวิร์ด :
ไม่:คีย์เวิร์ด not จะเปลี่ยนความหมายของคิวรีสื่อทั้งหมด
เท่านั้น:คำหลักเพียงคำเดียวป้องกันเบราว์เซอร์รุ่นเก่าที่ไม่สนับสนุนการสืบค้นสื่อที่มีคุณสมบัติสื่อจากการใช้สไตล์ที่ระบุ ไม่มีผลกับเบราว์เซอร์สมัยใหม่
และ:คำหลัก และ รวมคุณลักษณะสื่อกับประเภทสื่อหรือคุณลักษณะสื่ออื่น ๆ
พวกเขาทั้งหมดเป็นทางเลือก อย่างไรก็ตาม หากคุณใช้notหรือ onlyคุณต้องระบุประเภทสื่อด้วย
คุณยังสามารถมีสไตล์ชีต ที่แตก ต่างกันสำหรับสื่อต่างๆ ได้ดังนี้:
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
ประเภทสื่อ
| Value | Description |
|---|---|
| all | Default. Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
คุณสมบัติสื่อ
| Value | Description |
|---|---|
| any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
| any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
| aspect-ratio | The ratio between the width and the height of the viewport |
| color | The number of bits per color component for the output device |
| color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
| color-index | The number of colors the device can display |
| grid | Whether the device is a grid or bitmap |
| height | The viewport height |
| hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
| inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
| light-level | Current ambient light level (added in Media Queries Level 4) |
| max-aspect-ratio | The maximum ratio between the width and the height of the display area |
| max-color | The maximum number of bits per color component for the output device |
| max-color-index | The maximum number of colors the device can display |
| max-height | The maximum height of the display area, such as a browser window |
| max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
| max-resolution | The maximum resolution of the device, using dpi or dpcm |
| max-width | The maximum width of the display area, such as a browser window |
| min-aspect-ratio | The minimum ratio between the width and the height of the display area |
| min-color | The minimum number of bits per color component for the output device |
| min-color-index | The minimum number of colors the device can display |
| min-height | The minimum height of the display area, such as a browser window |
| min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
| min-resolution | The minimum resolution of the device, using dpi or dpcm |
| min-width | The minimum width of the display area, such as a browser window |
| monochrome | The number of bits per "color" on a monochrome (greyscale) device |
| orientation | The orientation of the viewport (landscape or portrait mode) |
| overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
| overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
| pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
| resolution | The resolution of the output device, using dpi or dpcm |
| scan | The scanning process of the output device |
| scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
| update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
| width | The viewport width |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ซ่อนองค์ประกอบเมื่อความกว้างของเบราว์เซอร์กว้าง 600px หรือน้อยกว่า:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
ตัวอย่าง
ใช้ Mediaqueries เพื่อตั้งค่าสีพื้นหลังเป็นลาเวนเดอร์หากวิวพอร์ตกว้าง 800 พิกเซลหรือกว้างกว่า เป็นสีเขียวอ่อนหากวิวพอร์ตกว้างระหว่าง 400 ถึง 799 พิกเซล หากวิวพอร์ตมีขนาดเล็กกว่า 400 พิกเซล สีพื้นหลังจะเป็นสีน้ำเงินอ่อน:
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
ตัวอย่าง
สร้างเมนูการนำทางที่ตอบสนอง (แสดงในแนวนอนบนหน้าจอขนาดใหญ่และแนวตั้งบนหน้าจอขนาดเล็ก):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
ตัวอย่าง
ใช้คิวรีสื่อเพื่อสร้างเค้าโครงคอลัมน์ที่ตอบสนอง:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
ตัวอย่าง
ใช้การสืบค้นข้อมูลสื่อเพื่อสร้างเว็บไซต์ที่ตอบสนอง:
ตัวอย่าง
แบบสอบถามสื่อยังสามารถใช้เพื่อเปลี่ยนเค้าโครงของหน้าขึ้นอยู่กับการวางแนวของเบราว์เซอร์ คุณสามารถมีชุดคุณสมบัติ CSS ที่จะใช้ได้ก็ต่อเมื่อหน้าต่างเบราว์เซอร์กว้างกว่าความสูงของหน้าต่าง ซึ่งเรียกว่า "แนวนอน"
ใช้สีพื้นหลังสีฟ้าอ่อนหากการวางแนวอยู่ในโหมดแนวนอน:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
ตัวอย่าง
ใช้ mediaqueries เพื่อตั้งค่าสีข้อความเป็นสีเขียวเมื่อเอกสารแสดงบนหน้าจอ และเป็นสีดำเมื่อพิมพ์:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
ตัวอย่าง
รายการที่คั่นด้วยเครื่องหมายจุลภาค : เพิ่มการสืบค้นสื่อเพิ่มเติมให้กับรายการที่มีอยู่แล้ว โดยใช้ลูกน้ำ (การดำเนินการนี้จะมีลักษณะเหมือนตัวดำเนินการ OR):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
หน้าที่เกี่ยวข้อง
บทช่วยสอน CSS: CSS Media Queries
บทช่วยสอน CSS: ตัวอย่างคิวรีสื่อ CSS
บทช่วยสอน RWD: การออกแบบเว็บที่ตอบสนองด้วยคิวรีสื่อ
บทช่วย สอน JavaScript: window.matchMedia() method