響應式布局2之Media Query（媒介查詢）

1.使用 @media 查詢可以針對不同的**型別定義不同的樣式。

2.@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面。

3.當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

@media mediatype and|not|only (media feature)

mediatype(**型別)說明

**型別

相容性描述

aural

已廢棄，用於語音和**合成器

braille

已廢棄，用於觸覺反饋裝置

handheld

已廢棄，用於小型或手持裝置

所有瀏覽器

用於印表機和列印預覽

projection

已廢棄，用於投影圖像，如幻燈片

screen

所有瀏覽器

用於電腦螢幕，平板電腦，智慧型手機等

tty已廢棄，用於使用固定間距字元格的裝置。如電傳打字機和終端

tv已廢棄，用於電視類裝置

embossed

已廢棄，用於凸點字元（盲文）印刷裝置

speech

用於語音型別

all所有瀏覽器

用於所有**裝置型別

media feature（**特性）說明值

描述aspect-ratio

定義輸出裝置中的頁面可見區域寬度與高度的比率

color

定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等於0

color-index

定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0

device-aspect-ratio

定義輸出裝置的螢幕可見寬度與高度的比率。

device-height

定義輸出裝置的螢幕可見高度。

device-width

定義輸出裝置的螢幕可見寬度。

grid

用來查詢輸出裝置是否使用柵格或點陣。

height

定義輸出裝置中的頁面可見區域高度。

max-aspect-ratio

定義輸出裝置的螢幕可見寬度與高度的最大比率。

max-color

定義輸出裝置每一組彩色原件的最大個數。

max-color-index

定義在輸出裝置的彩色查詢表中的最大條目數。

max-device-aspect-ratio

定義輸出裝置的螢幕可見寬度與高度的最大比率。

max-device-height

定義輸出裝置的螢幕可見的最大高度。

max-device-width

定義輸出裝置的螢幕最大可見寬度。

max-height

定義輸出裝置中的頁面最大可見區域高度。

max-monochrome

定義在乙個單色框架緩衝區中每畫素包含的最大單色原件個數。

max-resolution

定義裝置的最大解析度。

max-width

定義輸出裝置中的頁面最大可見區域寬度。

min-aspect-ratio

定義輸出裝置中的頁面可見區域寬度與高度的最小比率。

min-color

定義輸出裝置每一組彩色原件的最小個數。

min-color-index

定義在輸出裝置的彩色查詢表中的最小條目數。

min-device-aspect-ratio

定義輸出裝置的螢幕可見寬度與高度的最小比率。

min-device-width

定義輸出裝置的螢幕最小可見寬度。

min-device-height

定義輸出裝置的螢幕的最小可見高度。

min-height

定義輸出裝置中的頁面最小可見區域高度。

min-monochrome

定義在乙個單色框架緩衝區中每畫素包含的最小單色原件個數

min-resolution

定義裝置的最小解析度。

min-width

定義輸出裝置中的頁面最小可見區域寬度。

monochrome

定義在乙個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置，則值等於0

orientation

定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。

resolution

定義裝置的解析度。如：96dpi, 300dpi, 118dpcm

scan

定義電視類裝置的掃瞄工序。

width

定義輸出裝置中的頁面可見區域寬度。

**查詢可以被用在css中的@media和@import規則上，也可以被用在html和xml中

1、在head中引入

上面表示螢幕寬度小於等於600px時，使用example.css渲染web頁面

2、在@import中引入

<
style type
="text/css"
media
="screen and 
(min-width:600px) and (max-width:900px)">
@import
url(
"css/style.css"
);

上面表示螢幕大小在600-900之間時，使用style.css來渲染頁面

3直接在css中使用

@media screen and (max-width: 800px) 
.test2 
.test3 
}

裝置螢幕輸出寬度

最大裝置寬度max-device-width

rel=
"stylesheet"
media
="screen and (max-device-width: 480px)"
href
="iphone.css"
type
="text/css"
/>

上面的**指的是iphone.css樣式適用於最大裝置寬度為480px，比如說iphone上的顯示，注意：這裡的max-device-width所指的是裝置的實際解析度，也就是指可視面積解析度

rel=
"stylesheet"
media
="all and (orientation:portrait)"
href
="portrait.css"
type
="text/css"
/>
rel=
"stylesheet"
media
="all and (orientation:landscape)"
href
="landscape.css"
type
="text/css"
/>

在大數情況下，移動裝置ipad上的safari和在iphone上的是相同的，只是他們不同之處是ipad宣告了不同的方向，比如說上面的例子，在縱向(portrait)時採用portrait.css來渲染頁面；在橫向（landscape）時採用landscape.css來渲染頁面。

rel=
"stylesheet"
media
="not print and (max-width: 1200px)"
href
="print.css"
type
="text/css"
/>

not關鍵字是用來排除某種制定的**型別，換句話來說就是用於排除符合表示式的裝置。

rel=
"stylesheet"
media
="only screen and (max-device-width:240px)"
href
="android240.css"
type
="text/css"
/>

only用來定某種特定的**型別，可以用來排除不支援**查詢的瀏覽器。其實only很多時候是用來對那些不支援media query但卻支援media type的裝置隱藏樣式表的。其主要有：支援**特性（media queries）的裝置，正常呼叫樣式，此時就當only不存在；對於不支援**特性(media queries)但又支援**型別(media type)的裝置，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支援media qqueries的瀏覽器，不論是否支援only，樣式都不會被採用。

優點：

針對不同的終端(pc,手機，平板,androidtv以及主流瀏覽器)，介面友好，以達到多平台使用共乙個頁面的響應。

缺點：需要適配多種裝置，css**繁多。

響應式布局2之Media Query（媒介查詢）

響應式布局響應式布局技巧

響應式布局之 MediaQueries

前端之響應式布局

響應式布局2之Media Query（媒介查詢）

響應式布局 響應式布局技巧

響應式布局之 MediaQueries

前端之響應式布局

相關推薦

響應式布局響應式布局技巧