Skip to main content

[CSS] Media Query

keywords: responsive, RWD#

Using Media Queries @ MDN > Web technology for developers

Media Queries Basic#

透過 @media 可以用來定義要套用的

  • 媒體類型(Media Type):可用的類型包含 all (default), print, screenspeech
  • 媒體特性(Media Feature):常用的類型包含 width, height, aspect-ratio, orientation, resolution,這些類型常常需要給定一個區間,像是 min, max, min-width, max-width, min-aspect-ratio, max-aspect-ratio
// 定義媒體類型@media screen, print {  /* Styles for screen and print devices */}
// 同時定義媒體類型和媒體特性,中間需用 and 連接@media screen and (max-width: 650px) {  body {    background: rebeccapurple;  }}

使用 or#

你可以透過 , 來定義許多的 queries 條件,在這裡「逗號」就如同 or 一樣:

// 只要符合其中一種條件就會套用到@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) {  /* ... */}

使用 not#

// not 會同時套用到 media types 和 media features
@media not screen and (hover: hover) {  /* 當不能 hovers 時才會套用 */}

其他設定#

FEATURE NAMEDEFINITIONHAS min- AND max- PREFIXES
width顯示區域的寬度V
height顯示區域的高度V
device-width裝置器的寬度V
device-height裝置器的高度V
orientation選擇直向(portrait)或橫向(landscape)@media screen and (orientation:portrait){}
aspect-ratio顯示區域的長寬比V
device-aspect-ration裝置器的長寬比V
color裝置器每個色彩顯示的 bits 數,例如一個 8-bit color device 能夠使用(color:8),沒有色彩的裝置則使用 0。V
color-indexThe number of entries in the color lookup table of the output deviceV
monochromeSimilar to color, the monochrome feature lets us test the number of bits per pixel in a monochrome device.V
resolutionTests the density of the pixels in the device, such as screen and(resolution: 72dpi) or screen and (max-resolition:300dpi)V

載入不同的 CSS 檔#

<link rel="stylesheet" type="text/css" href="all.css" media="screen" /><link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)" /><link  rel="stylesheet"  type="text/css"  href="b.css"  media="screen and (min-width: 768px) and (max-width: 979px)"/><link rel="stylesheet" type="text/css" href="c.css" media="screen and (min-width: 1200px)" /><link rel="stylesheet" type="text/css" href="d.css" media="screen and (max-device-width: 480px)" />

實用範例#

瀏覽器尺寸#

@media screen and (min-width: 1024px) {  /*STYLES*/}
@media screen and (min-width: 1200px) {  // 如果使用者之視窗寬度 >= 1200px,將會再載入這裡的 CSS。}
@media screen and (min-width: 768px) and (max-width: 979px) {  // 如果使用者之視窗寬度介於 768px ~ 979px,將會再載入這裡的 CSS。}
@media screen and (max-width: 767px) {  // 如果使用者之視窗寬度 <= 768px,將會再載入這裡的 CSS。}
@media screen and (max-device-width: 480px) {  // 如果使用者之裝置寬度 <= 480px,將會再載入這裡的 CSS。}

瀏覽器直立或橫放#

@media screen and (orientation: portrait) {  // 直立時套用}
@media screen and (orientation: landscape) {  // 橫放時套用}

retina 顯示器#

我們可以透過 min-resolution: 192dpi-webkit-min-device-pixel-ratio: 2 來定義 retina 顯示器:

// 120dpi - 720px,// 192dpi - 1200px@media screen and (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2) {  /* ... */}
@media screen and (min-resolution: 120dpi) and (min-width: 720px) {  // ...}

Retina Display Media Query @ CSS Tricks

印表機#

@media print {  /* styles for print media only */}

參考#