CSS @media กฎ

การระบุและวิธีใช้

@media กฎใช้ในมีเดียความศูนย์กลางเพื่อใช้สไตล์ที่แตกต่างกันสำหรับมีเดียประเภท/อุปกรณ์ต่าง ๆ。

มีเดียความศูนย์กลางสามารถใช้ตรวจสอบหลายอย่าง เช่น:

  • ความกว้างและความสูงของโพร่งมอง
  • ความกว้างและความสูงของอุปกรณ์
  • แนวทาง (เครื่องมือหน้าจอหรือตั้งโต๊ะอยู่ในโหมดแนวตั้งหรือแนวนอน?)
  • การแบ่งตัวตาย

การใช้มีเดียความศูนย์กลางเป็นเทคโนโลยีที่นิยมต่อสู้ สำหรับจัดทำสไตล์ที่ทันทีสำหรับตัวเครื่องคอมพิวเตอร์ตั้งโต๊ะ คอมพิวเตอร์บนเครื่องมือ ตั้งโต๊ะและโทรศัพท์มือถือ (responsive web design)。

คุณยังสามารถใช้มีเดียความศูนย์กลางเพื่อกำหนดสไตล์บางอย่างที่เพียงใช้สำหรับเอกสารที่เรียกใช้ในการพิมพ์หรืออ่านด้วยเครื่องอ่านจอ (mediatype: print, screen หรือ speech)。

นอกจากประเภทสื่อแล้ว ยังมีความเฉพาะของสื่ออีกด้วย ความเฉพาะของสื่อนี้ให้มีข้อมูลเฉพาะบางประการของตัวประกอบหรืออุปกรณ์ที่ใช้สำหรับการแสดงผล ให้มีข้อมูลเพิ่มเติมให้กับมีความเฉพาะของสื่อ ตัวอย่างเช่น คุณสามารถใช้สไตล์ที่เฉพาะเจาะจงสำหรับหน้าจอที่มีขนาดกว้างมากกว่าหรือน้อยกว่าค่าที่กำหนด

ดูเพิ่มเติม

ตัวอย่าง CSSCSS คำสั่งค้นหามีเศษ

ตัวอย่าง CSSตัวอย่าง CSS มีความเฉพาะของสื่อ

ตัวอย่าง RWDทำให้มีการออกแบบเว็บแบบตอบสนองด้วยการใช้มีความเฉพาะของสื่อ

คู่มืออ้างอิง JavaScriptวิธีการใช้หน้าต่าง window.matchMedia()

ตัวอย่าง

ตัวอย่าง 1

หากความกว้างของหน้าต่างบราวเซอร์เท่า 600px หรือน้อยกว่า แล้ว แปลงสีพื้นหลังขององค์ประกอบ <body> ไปเป็นสีฟ้าขาว

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

親自試一試

คุณสามารถหาตัวอย่างโดยไม่เสียเวลาหลายๆ ที่ด้านล่างของหน้าเว็บ

การใช้ภาษา CSS

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

ความหมายของ not, only และ and: คำสั่ง not, only และ and

not: คำสั่ง not จะเปลี่ยนความหมายของคำถามทั้งหมดของมีความเฉพาะของสื่อ

only: คำสั่ง only จะป้องกันให้เบราเซอร์ตัวเก่าใช้สไตล์ที่กำหนด ซึ่งไม่สนับสนุนมีความเฉพาะของสื่อ มันไม่มีผลที่สำคัญต่อเบราเซอร์ปัจจุบัน

and: คำสั่ง and จะรวมความเฉพาะของสื่อกับประเภทสื่อหรือความเฉพาะของสื่ออื่นๆ

มันเป็นสิ่งที่เลือกใช้ได้ แต่หากใช้ 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">
....

ประเภทสื่อ

ค่า การอธิบาย
all โดยความเป็นต้น
print สำหรับเครื่องพิมพ์
screen สำหรับหน้าจอคอมพิวเตอร์ ตั้งโต๊ะ มือถือ โทรศัพท์สมาร์ทและอื่นๆ
speech สำหรับผู้ใช้งานที่มีการอ่านหน้าเว็บด้วยวิธีเสียง

ความเฉพาะของสื่อ

ค่า การอธิบาย
any-hover

มีระบบการเข้าถึงที่ใช้สำหรับให้ผู้ใช้ (เช่นเมาส์) อยู่บนองค์ประกอบหรือไม่?

ถูกเพิ่มเข้ามาใน Media Queries Level 4
any-pointer

มีอุปกรณ์จุดนำทางในระบบการเข้าถึงที่มีอยู่หรือไม่ และถ้ามี ความละเอียดของมันเท่าไหร่?

ถูกเพิ่มเข้ามาใน Media Queries Level 4
aspect-ratio 视口（viewport）的宽高比。
color

device-width

ความสัมพันธ์ของความกว้างและความสูงของโฉมที่มองเห็น (viewport)
color

ค่าเท่ากับ 0 ถ้าอุปกรณ์ไม่สนับสนุนการแสดงสี

ถูกเพิ่มเข้ามาใน Media Queries Level 4
color-gamut

สภาพแวดล้อมสีที่ตัวแทนผู้ใช้และอุปกรณ์สนับสนุน

color-index
จำนวนของตารางค้นหาสี (color lookup table) ของอุปกรณ์ออก

ค่าเท่ากับ 0 ถ้าอุปกรณ์ไม่ใช้ตารางค้นหาสี (color lookup table)

ถูกทำเครื่องหมายว่าไม่น่าจะใช้ใน Media Queries Level 4
device-aspect-ratio

ความสัมพันธ์ของความกว้างและความสูงของอุปกรณ์ในการวาด

ถูกทำเครื่องหมายว่าไม่น่าจะใช้ใน Media Queries Level 4
ความสูงของพื้นที่แสดงที่อุปกรณ์ใช้ในการวาด (เช่นหน้าต่าง)

ความกว้างของพื้นที่แสดงที่อุปกรณ์ใช้ในการวาด (เช่นหน้าต่าง)

ถูกทำเครื่องหมายว่าไม่น่าจะใช้ใน Media Queries Level 4
display-mode

โมดูลแสดงของโปรแกรม ตามที่กำหนดโดยสมาชิก display ใน manifest ของ web app

ถูกกำหนดใน spec ของ Web App Manifest
forced-colors

ตรวจสอบว่าตัวแทนผู้ใช้ยังจำกัดการใช้ตัวดำเนินการต่าง ๆ ของสีหรือไม่

ถูกเพิ่มเข้ามาใน Media Queries Level 5
grid อุปกรณ์ใช้หน้าต่างเเมล็ดหรือหน้าต่างจุดใช้หรือไม่
height ความสูงของโฉมที่มองเห็น (viewport)
hover

ระบบหลักของอินพุท โดยที่มีความสามารถให้ผู้ใช้เลื่อนหมุนหลังจากหน้าต่างนอกเบราเซอร์

ถูกเพิ่มเข้ามาใน Media Queries Level 4
inverted-colors

เครื่องมือเบราเซอร์หรือระบบปฏิบัติการระดับต่ำก็เปลี่ยนสีหรือไม่

ถูกเพิ่มเข้ามาใน Media Queries Level 5
light-level

ระดับแสงสว่างของสภาพแวดล้อมปัจจุบัน

ถูกเพิ่มเข้ามาใน Media Queries Level 5
max-aspect-ratio ความสัมพันธ์ของความกว้างและความสูงของพื้นที่แสดงที่ต้องการของอุปกรณ์
max-color ความละตาของบิตสำหรับแต่ละส่วนสีของอุปกรณ์ออก
max-color-index จำนวนสีที่อุปกรณ์สามารถแสดงขึ้นที่สุด
max-height ความสูงที่สูงสุดของพื้นที่แสดงของอุปกรณ์ ตัวอย่างเช่น หน้าต่างนอกเบราเซอร์
max-monochrome ความละตาของบิตสำหรับแต่ละ "สี" ในอุปกรณ์สีแบบเดียว (น้ำเงินขาว)
max-resolution ความละตาที่สูงสุดของอุปกรณ์ ใช้ dpi หรือ dpcm
max-width ความกว้างที่สุดของพื้นที่แสดงของอุปกรณ์ ตัวอย่างเช่น หน้าต่างนอกเบราเซอร์
min-aspect-ratio ความสัมพันธ์ของความกว้างและความสูงของพื้นที่แสดงที่ต้องการของอุปกรณ์
min-color ความละตาของบิตสำหรับแต่ละส่วนสีของอุปกรณ์ออก
min-color-index จำนวนสีที่อุปกรณ์สามารถแสดงขึ้นที่สุด
min-height ความสูงของพื้นที่แสดงของอุปกรณ์ ตัวอย่างเช่น หน้าต่างนอกเบราเซอร์
min-monochrome ซับซ้อนสีแบบเดียว (น้ำเงินขาว) ความละตาของบิตสำหรับแต่ละ "สี" ในอุปกรณ์
min-resolution ความละเอียดของอุปกรณ์ ใช้ dpi หรือ dpcm
min-width ความกว้างของพื้นที่แสดงที่ต่ำที่สุด ตัวอย่างเช่น หน้าต่างนอนเครื่องนอน
monochrome

ความลึกของพิกเซลในเฟรมบัฟเฟอร์โฟนเดย์ของอุปกรณ์ออกเหลือง

ถ้าอุปกรณ์ไม่ใช้แสดงในรูปแบบของดำและขาว ค่านี้จะมีค่า 0
orientation ทิศทางที่โพรบิวต์(viewport)ที่หมุน(แบบแสดงแนวตั้งหรือแนวนอน)
overflow-block

วิธีที่อุปกรณ์ออกเหลืองจัดการกับสิ่งที่เหลืออยู่นอกของโพรบิวต์(viewport)บนแนวแบบ

ถูกเพิ่มเข้ามาใน Media Queries Level 4
overflow-inline

สิ่งที่เหลืออยู่นอกของโพรบิวต์(viewport)บนแนวโยงของออฟไลน์สามารถเลื่อนหรือไม่?

ถูกเพิ่มเข้ามาใน Media Queries Level 4
pointer

หลักอุปกรณ์นำทางหลักเป็นอุปกรณ์ที่ใช้เซนเซอร์คะนองหรือไม่? ถ้าเป็น อุปกรณ์ที่ใช้เซนเซอร์คะนอง ความละเอียดของมันเท่าไหร่?

ถูกเพิ่มเข้ามาใน Media Queries Level 4
prefers-color-scheme

ตรวจสอบว่าผู้ใช้ยอมรับสีแสงหรือสีเงินของโปรแกรม

ถูกเพิ่มเข้ามาใน Media Queries Level 5
prefers-contrast

ตรวจสอบว่าผู้ใช้ต้องการเพิ่มหรือลดความสดสวนระหว่างสีที่ใกล้เคียง

ถูกเพิ่มเข้ามาใน Media Queries Level 5
prefers-reduced-motion

ความต้องการของผู้ใช้ในการให้หน้ามีน้อยลงของการแสดงที่เคลื่อนไหว

ถูกเพิ่มเข้ามาใน Media Queries Level 5
prefers-reduced-transparency

ความต้องการของผู้ใช้ในการเลือกความโปร่งใสที่ต่ำกว่า

ถูกเพิ่มเข้ามาใน Media Queries Level 5
resolution การตั้งค่าความละเอียดของอุปกรณ์ออกเหลือง ใช้ dpi หรือ dpcm
scan กระบวนการสแกนของอุปกรณ์ออกเหลือง(เช่น โทรทัศน์)
scripting

ตรวจสอบว่าสคริปต์(เช่น JavaScript)มีความสามารถใช้งานหรือไม่

ถูกเพิ่มเข้ามาใน Media Queries Level 5
update

ความเร็วที่อุปกรณ์ออกเหลืองสนับสนุนการแสดงที่ปรับปรุง

ถูกเพิ่มเข้ามาใน Media Queries Level 4
width ความกว้างของโพรบิวต์(viewport)

หลายตัวอย่าง

ตัวอย่าง 2

เมื่อความกว้างของเครื่องนอนน้อยกว่า 600px ซึ่งก็เป็นสาเหตุให้ฟอร์มแสดงไม่มีสิ่งใดในหน้า:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

親自試一試

ตัวอย่าง 3

ถ้าความกว้างของโพรบิวต์เป็น 800 พิกเซลหรือกว้างกว่านั้น ใช้คำสั่ง media query เพื่อตั้งสีพื้นหลังเป็นสีชมพูเหลืองน้ำเงิน; ถ้าความกว้างของโพรบิวต์อยู่ระหว่าง 400 ถึง 799 พิกเซล ใช้คำสั่ง media query เพื่อตั้งสีพื้นหลังเป็นสีเขียวเหลืองขาว; ถ้าโพรบิวต์ต่ำกว่า 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;
  }
}

親自試一試

ตัวอย่าง 4

创建一个响应式导航菜单（在大屏幕上水平显示，在小屏幕上垂直显示）：

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

親自試一試

例子 5

使用媒體查詢來創建響應式列佈局：

/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在宽度小于或等于 600 像素的屏幕上，使各列堆疊，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

親自試一試

例子 6

使用媒體查詢來創建響應式網站：

親自試一試

例子 7

媒體查詢還可以用于根据浏览器的方向更改页面的布局。您可以写一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度（即“横屏”方向）时才适用。

如果方向處於橫屏模式，則使用淺藍色背景色：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

親自試一試

例子 8

使用媒體查詢將文本顏色設置為在屏幕上顯示文檔時為綠色，在打印時為黑色：

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

親自試一試

例子 9

逗號分隔的列表：使用逗號將另一個媒體查詢添加到已存在的媒體查詢中（它的行為類似 OR 運算符）：

/* 当宽度介于 600px 和 900px 之间或大于 1100px 时 - 改变 <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;
  }
}

親自試一試

瀏覽器支持

表格中的數字注明了完全支持 @media 规則的首個瀏覽器版本。

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9