在學習響應式布局時， 首先應該了解的就是media queries， 根據不同顯示裝置來應用不同的樣式表(css)
在html4以及css2中式支援根據不同的media-type來應用不同的樣式的. 而media queries則是在css2的media-type基礎上增加更多更精確的樣式。
1. media-type
media-type用來定義不同的顯示型別，應用不同css樣式表，如： 乙個文件在顯示器(screen)與印表機中使用不同的css樣式表.**如下：
rel="stylesheet" type="text/css" media="screen" href="sans-serif
.css">
rel="stylesheet" type="text/css" media="print" href="serif
.css">
@media screen
}@media print
}
2.1 基本知識
media-type所支援的型別在html4中被定義， 其值可為 『aural』, 『braille』, 『handheld』, 『print』, 『projection』, 『screen』, 『tty』, 『tv』. 其中css2中廢棄了『aural』 and adds 『embossed』 and 『speech
「all」: 用來定義可用於所有的裝置型別。
2.media queries
乙個media query由乙個media-type以及零個或者多個表示式組成，用來檢查特殊的media屬性。
其語法如下：
rel="stylesheet"
media="screen and (color)"
href="example.css" />
@import url(color.css) screen and (color);
2.2 表示式語法
其語法形式為：…或者@media[在css文件中]
1. 的值為： [ [『,』 ]*]:乙個或者多個media_query，用,隔開
2. media_query的值為：[only | not]? s* media_type s* [ and s* expression ]*
| expression [ and s* expression ]*:only/not二選一或者沒有，media-type 以及零個或者多個expression
3. expression的值為：media_feature [ 『:』 s* expr ]?：media屬性以及條件
如：
@media all and (monochrome)aspect-ratio: 定義輸出裝置中的頁面可見區域寬度與高度的比率
max-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最大比率。
min-aspect-ratio 定義輸出裝置中的頁面可見區域寬度與高度的最小比率。
device-aspect-ratio: 定義輸出裝置的螢幕可見寬度與高度的比率。
max-device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最大比率。
min-device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最小比率。
color: 定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等於0
max-color 定義輸出裝置每一組彩色原件的最大個數。
min-color 定義輸出裝置每一組彩色原件的最小個數。
color-index: 定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
max-color-index 定義在輸出裝置的彩色查詢表中的最大條目數。
min-color-index 定義在輸出裝置的彩色查詢表中的最小條目數。
device-height 定義輸出裝置的螢幕可見高度。
max-device-width 定義輸出裝置的螢幕最大可見寬度。
min-device-height 定義輸出裝置的螢幕的最小可見高度。
device-width 定義輸出裝置的螢幕可見寬度。
max-device-height 定義輸出裝置的螢幕可見的最大高度。
min-device-width 定義輸出裝置的螢幕最小可見寬度。
grid 用來查詢輸出裝置是否使用柵格或點陣。
width 定義輸出裝置中的頁面可見區域寬度。
max-width 定義輸出裝置中的頁面最大可見區域寬度。
min-width 定義輸出裝置中的頁面最小可見區域寬度。
height 定義輸出裝置中的頁面可見區域高度。
max-height 定義輸出裝置中的頁面最大可見區域高度。
min-height 定義輸出裝置中的頁面最小可見區域高度。
resolution 定義裝置的解析度。如：96dpi, 300dpi, 118dpcm
max-resolution 定義裝置的最大解析度。
min-resolution 定義裝置的最小解析度。
monochrome 定義在乙個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置，則值等於0
max-monochrome 定義在乙個單色框架緩衝區中每畫素包含的最大單色原件個數。
min-monochrome 定義在乙個單色框架緩衝區中每畫素包含的最小單色原件個數
orientation 定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。
scan 定義電視類裝置的掃瞄工序。
CSS3響應自適應布局Media Queries
media queries是css3新增加的乙個模組功能，其最大的特色就是通過css3來查詢 然後呼叫對應的樣式。在徹底地了解media queries之前，我們需要了解其中的兩個重要部分，第乙個是 型別，第二個是 特性。型別 media type 在css2中是乙個常見的屬性，可以通過 型別對不同...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
前端之響應式布局
就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本，可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗。在標頭檔案中新增乙個meta標籤 其中，width device width 這一句的意思是讓頁面的寬度等於螢幕的寬度。rem 指的是 html 元素的 font size，ht...