การทำความเข้าใจ CSS Media Types และ Media Queries

CSS Media Types และ Queries ช่วยให้ผู้ใช้สามารถกำหนดสไตล์บางอย่างให้สอดคล้องกับประเภททั่วไปของอุปกรณ์ (screen, print, ฯลฯ) หรือลักษณะเฉพาะของอุปกรณ์ (ความละเอียดหน้าจอ, ขนาด viewport, ฯลฯ)

ไวยากรณ์

ไวยากรณ์สำหรับ media queries มีดังนี้:

@media not | only mediatype and (expressions) {    CSS-Code; }

ที่นี่ media query จะถูกนำไปใช้หาก:

• mediatype ตรงกับประเภทอุปกรณ์ที่เอกสารถูกเรนเดอร์
• ไม่มีการกำหนด operators not/only แล้ว media query จะใช้กับ mediatypes ทั้งหมด
• มีการระบุ operators not/only แล้ว media query จะไม่/จะใช้กับ mediatype บางประเภทตามลำดับ

ผู้ใช้สามารถมี stylesheets ต่างๆ แต่ละอันสอดคล้องกับ media ต่างกัน ตัวอย่างเช่น ผู้ใช้สามารถมี stylesheet แตกต่างกันสำหรับ print และ screen media

<link rel="stylesheet" media="print and|not|only (expressions)" href="print.css">

และ

<link rel="stylesheet" media="screen and|not|only (expressions)" href="screen.css">

ต่อไปนี้คือ media types ที่ระบุใน CSS3:

วิธีการสร้าง stylesheets ที่ขึ้นอยู่กับ media:

• ใช้ @media At-rules
• ใช้ @import At-rules
• ใช้ HTML <link> element พร้อมแอตทริบิวต์ media

ตัวอย่าง

ลองดูตัวอย่างสำหรับ CSS media query:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {    box-sizing: border-box; } .col {    float: left;    width: 20%;    padding: 40px; } body {    background-color: lemonchiffon;    margin: 20px; } @media screen and (max-width: 850px) {    .col {       width: 50%;    }    body {       background-color: mediumseagreen;    } } @media screen and (max-width: 550px) {    .col {       width: 100%;    }    body {       background-color: powderblue;    } } </style> </head> <body> <div class="row"> <div class="col" style="background-color:#373;"> </div> <div class="col" style="background-color:#363;"> </div> <div class="col" style="background-color:#353;"> </div> <div class="col" style="background-color:#343;"> </div> <div class="col" style="background-color:#333;"> </div> </div></body></html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

เมื่อขนาดหน้าจอเกิน 850px:

เมื่อขนาดหน้าจออยู่ระหว่าง 550px และ 850px:

เมื่อขนาดหน้าจอน้อยกว่า 550px:

ตัวอย่าง

ลองดูตัวอย่างเพิ่มเติมสำหรับ CSS media query: HTML Document:

<!DOCTYPE html> <html> <head> <style type="text/css"> @import url(screen.css) screen; @import url(print.css) print; </style> </head> <body> <p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p> <p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p> <p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p> </body> </html>

CSS document (screen.css): p { color: navy; font-style: italic; } .two { color: #c303c3; font-size: 20px; } body { background-color: honeydew;} CSS document (print.css): p { color: red; font-style: italic;} .two { color: #989898; font-size: 40px; }

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

เมื่อเอกสารมองเห็นใน mediatype screen:

เมื่อเอกสารมองเห็นใน mediatype print: