CSS Media queries解說與max-width、min-width用法

 

一、Media queries解說

在CSS2只有media types可用，而在CSS3則包括了media types與media feature兩主部分合稱叫做media

queries，可用來判斷瀏覽器、平板、手機的寬度作相對應的處理，

語法為

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

mediatype通常以screen實用居多，media feature則以min-width或max-width實用居多。

 

1、media queries查詢條件的使用

Query的語法只有四項：and、or、not、only

(1)、and

如果User Angent為screen且Browser寬度為 500px (含) 以上，就套用這css設定

@media screen and (min-width:500px) {
    CSS-Code;
}

(2)、or

or用法在這裡是以逗號表示

如果User Angent為screen且Browser寬度為 500px (含) 以上，

或是彩色投影機時，就套用這css設定。請注意，and優先權比or高。

@media screen and (min-width:500px) , projection and (color) {
    CSS-Code;
}

(3)、not

not意思為負邏輯，

彩色螢幕不會套用 css 設定，彩色印表機會套用 css 設定

@media not screen and (color), print and (color) {
    CSS-Code;
}

換個寫法可以釐清and、or、not運算元的優先權

@media (not (screen and (color))), print and (color) {
    CSS-Code;
}

(4)、only

如果你事先知道特定的User Angent不支援你寫的CSS-Code的時候，

這時你就可以使用only來避開他，並專心讓支援你寫的CSS-Code的User Angent來執行即可。

如下意思為，具有彩色螢幕的User Angent直接使用我寫的CSS-Code(example.css)，

至於其他型態的User Angent不需判斷一概跳過。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

其結果會和沒有關鍵字「only」一樣，但判斷過程可是有差別的。

<link rel="stylesheet" media="screen and (color)" href="example.css" />

 

Media Types如下表

Value	Description
all	Used for all media type devices
aural	Deprecated. Used for speech and sound synthesizers
braille	Deprecated. Used for braille tactile feedback devices
embossed	Deprecated. Used for paged braille printers
handheld	Deprecated. Used for small or handheld devices
print	Used for printers
projection	Deprecated. Used for projected presentations, like slides
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that "reads" the page out loud
tty	Deprecated. Used for media using a fixed-pitch character grid, like teletypes and terminals
tv	Deprecated. Used for television-type devices

media feature如下表

Value	Description
aspect-ratio	Specifies the ratio between the width and the height of the display area
color	Specifies the number of bits per color component for the output device
color-index	Specifies the number of colors the device can display
device-aspect-ratio	Specifies the ratio between the width and the height of the device
device-height	Specifies the height of the device, such as a computer screen
device-width	Specifies the width of the device, such as a computer screen
grid	Specifies whether the device is a grid device or not
height	Specifies the height of the display area, such as a browser window
max-aspect-ratio	Specifies the maximum ratio between the width and the height of the display area
max-color	Specifies the maximum number of bits per color component for the output device
max-color-index	Specifies the maximum number of colors the device can display
max-device-aspect-ratio	Specifies the maximum ratio between the width and the height of the device
max-device-height	Specifies the maximum height of the device, such as a computer screen
max-device-width	Specifies the maximum width of the device, such as a computer screen
max-height	Specifies the maximum height of the display area, such as a browser window
max-monochrome	Specifies the maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution	Specifies the maximum resolution of the device, using dpi or dpcm
max-width	Specifies the maximum width of the display area, such as a browser window
min-aspect-ratio	Specifies the minimum ratio between the width and the height of the display area
min-color	Specifies the minimum number of bits per color component for the output device
min-color-index	Specifies the minimum number of colors the device can display
min-device-aspect-ratio	Specifies the minimum ratio between the width and the height of the device
min-device-width	Specifies the minimum width of the device, such as a computer screen
min-device-height	Specifies the minimum height of the device, such as a computer screen
min-height	Specifies the minimum height of the display area, such as a browser window
min-monochrome	Specifies the minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution	Specifies the minimum resolution of the device, using dpi or dpcm
min-width	Specifies the minimum width of the display area, such as a browser window
monochrome	Specifies the number of bits per "color" on a monochrome (greyscale) device
orientation	Specifies the whether the display is in landscape mode or portrait mode
resolution	Specifies the resolution of the device, using dpi or dpcm
scan	Specifies progressive or interlaced scanning of a television
width	Specifies the width of the display area, such as a browser window

 

二、max-width、min-width用法

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightgreen;
        }

        @media screen and (max-width: 300px) {
            body {
                background-color: lightblue;
            }
        }
    </style>
</head>
<body>

    <p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

JS Bin

此範例的作用是當@media type為screen(computer、table、smart-phone)畫面

小於等於300px時背景色為lightblue，大於300px以外為背景色亮綠色。

 

如果換成min-width呢?

@media screen and (min-width: 300px) {
    body {
        background-color: lightblue;
    }
}

大於等於300px時背景色為lightblue，小於300px以內為背景色亮綠色。

 

所以min-width:300px可以解釋的為寬度不低於300px則do somthing；

max-width:300px可以解釋為寬度不高於300px則do somthing。

這簡直就是反邏輯嘛!!!一點都不好理解(怒)

 

三、IE trick

雖然IE11可以使用Media queries，

但需注意其格式，多一個空白都不行，機車的很。

/*IE11接受landscape後面沒空白*/
@media screen and (orientation: landscape) {
    body {
        background-color: red;
    }
}
/*IE11不接受landscape後面有空白*/
@media screen and (orientation: portrait ) {
    body {
        background-color: blue;
    }
}

大家請小心別被IE11陰到了。

 

參考資料：

W3C Media Queries

Using media queries

九個適應性設計小撇步，把你的網站打造成變形金剛！（下篇）

CSS Media Queries Module