การสร้าง Media Dependent Style Sheets ด้วย CSS

Media Dependent Stylesheets คือสไตล์ชีทที่ใช้งานได้เฉพาะเมื่อ media type ตรงกับประเภทอุปกรณ์ที่แสดงเอกสาร

สามารถสร้างได้ 3 วิธี:

1. ใช้กฎ @media At-rules
2. ใช้กฎ @import At-rules
3. ใช้แอตทริบิวต์ media ในแท็ก HTML <link>

ตัวอย่างที่ 1: ใช้ <link media> แยกไฟล์ Screen และ Print

HTML Document:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" media="screen" href="screen.css">
  <link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
<body>
  <div></div>
</body>
</html>

CSS document (screen.css):

div {
  height: 50px; width: 100px; border-radius: 20%;
  border: 2px solid blueviolet;
  box-shadow: 22px 12px 3px 3px lightblue;
  position: absolute; left: 30%; top: 20px;
}

CSS document (print.css):

div {
  height: 50px; width: 100px; border-radius: 20%;
  border: 2px solid #dc3545;
  box-shadow: 22px 12px 3px 3px #dc3545;
  position: absolute; left: 30%; top: 20px;
}

ผลลัพธ์

แสดงบนหน้าจอ (screen media type):

แสดงในโหมดพิมพ์ (print media type):

ตัวอย่างที่ 2: ใช้ @media ภายในไฟล์ CSS เดียว

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    p {
      background-origin: content-box; background-repeat: no-repeat;
      background-size: cover; box-shadow: 0 0 3px black;
      padding: 20px; background-origin: border-box;
    }
    @media screen and (max-width: 900px) {
      p {
        background: url("https://www.tutorialspoint.com/android/images/android.jpg");
        color: #c303c3;
      }
    }
    @media screen and (max-width: 500px) {
      p {
        color: black;
        background: url("https://www.tutorialspoint.com/react_native/images/react-native.jpg");
      }
    }
  </style>
</head>
<body>
  <p>This is demo text... (ยาว)</p>
</body>
</html>

ผลลัพธ์

หน้าจอกว้างกว่า 500px:

หน้าจอแคบกว่า 500px:

เปรียบเทียบวิธีการ

แนะนำ: ใช้ @media ในไฟล์ CSS หลัก ร่วมกับ <link media="print"> สำหรับ print stylesheet แยกต่างหาก