響應(yīng)式布局是一個(gè)概念，即一個(gè)頁(yè)面能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為了解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的
CSS3中的Media Query（媒體查詢）
media query可以獲取設(shè)備的寬和高device-width，device-height顯示屏幕/觸覺設(shè)備。
渲染窗口的寬和高width，height顯示屏幕/觸覺設(shè)備。
設(shè)備的手持方向，橫向還是豎向orientation（portrait|lanscape）和打印機(jī)等。
畫面比例aspect-ratio點(diǎn)陣打印機(jī)等。
設(shè)備比例device-aspect-ratio-點(diǎn)陣打印機(jī)等。
對(duì)象顏色或顏色列表color，color-index顯示屏幕。
設(shè)備的分辨率resolution。
語法結(jié)構(gòu)以及用法
@media 設(shè)備名 only （選取條件） not （選取條件） and（設(shè)備選取條件），設(shè)備二{sRules}
舉個(gè)例子，一個(gè)div元素，在屏幕寬320-240的時(shí)候隱藏
@media (max-width:375px) and (min-width: 240px){
.div{
display: none;
}
媒體查詢也可以使用文件的方式代替，在條件觸發(fā)時(shí)生效，始終會(huì)被下載，寫法：
<link style="style.css" media="media (max-width:375px)">
注意
在頁(yè)面的頭部<head></head>之間加上下面這句∶
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
meta viewport這個(gè)屬性是在移動(dòng)設(shè)備上設(shè)置原始大小顯示和是否縮放的聲明。
