所謂的響應(yīng)式網(wǎng)站，也就是讓網(wǎng)頁(yè)的寬度在所有的設(shè)備上都能完美的呈現(xiàn)給用戶觀看及瀏覽，媒體呢也就是指的這些設(shè)備，常見的媒體有電腦、手機(jī)、平板、電視、打印機(jī)、投影儀等，電腦手機(jī)及平板稱之為一類（screen），電視（tv），打印機(jī)（print），投影儀（projection）

下面就是我手機(jī)的一些最常見的媒體查詢


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=5.0"/>
//寫在head標(biāo)簽里面，width=device-width表示網(wǎng)頁(yè)寬度等于設(shè)備的寬度，initial-scale=1.0表示網(wǎng)頁(yè)的初始寬度是一倍也就是100%，user-scalable=no表示用戶是否可以縮放網(wǎng)頁(yè)的比例，minimum-scale=1.0, maximum-scale=5.0這兩個(gè)代表網(wǎng)頁(yè)縮放的最小值和最大值




<link rel="stylesheet" media="(max-width:480px)" href="media.css">
//最大寬度為480，也就是當(dāng)寬度小于480的時(shí)候加載此樣式表

<link rel="stylesheet" media="(min-width:480px)" href="media.css">
//最小寬度為480，也就是當(dāng)寬度大于480的時(shí)候加載此樣式表


<style>
/*直接寫在樣式表里面，當(dāng)寬度小于480的時(shí)候這里面的樣式將會(huì)生效*/
@media(max-width:480px){
    body{width:480px;height:100%;}
    .content{width:460px;height:auto;margin:0px auto;}
}
</style>


<link rel="stylesheet" href="print.css" media="print">
//這次加載的樣式表只能應(yīng)用與打印機(jī)，后面規(guī)定了媒體類型的



@media(orientation:portrait){
    //如果是垂直方向，這里的樣式將生效
}

@media(max-device-width:480px){
    //判斷用戶分辨率最大是不是480，也就是當(dāng)分辨率小于等480的時(shí)候這里面的屬性就生效
}
@media(max-device-width:480px){
    //判斷用戶分辨率最小是不是480，也就是當(dāng)分辨率大于等480的時(shí)候這里面的屬性就生效
}

//媒體查詢用戶可視窗口比例
@media(aspect-ratio:3/2){
    //如果是3：2這里的樣式就生效
    //也可以設(shè)置大于或小于
    //max-aspect-ratio:3/2
    //min-aspect-ratio:3/2
}

//媒體查詢用戶屏幕的比例
@media(device-aspect-ratio:3/2){
    //這個(gè)是查詢用戶屏幕的比例，上面是查詢用戶可視窗口的比例，用法同上，也支持max和min
}



//判斷用戶設(shè)備是垂直方向還是水平方向
@media(orientation:portrait){
    //如果是垂直方向
}
@media(orientation:landscape){
    //如果是水平方向
}

//查詢用戶的可視高度 和 設(shè)備的總體高度：height && device-height
@media(height:480px){
    //如果可視高度是480的時(shí)候就生效
    也支持max 和 min
}

@media(device-height:480px){
    //如果用戶的設(shè)備高度是480的時(shí)候就生效
    也支持max 和 min
}


//查詢用戶的可視寬度 和 設(shè)備的總體寬度：width && device-width
@media(width:480px){
    //如果可視寬度是480的時(shí)候就生效
    也支持max 和 min
}

@media(device-width:480px){
    //如果用戶的設(shè)備寬度是480的時(shí)候就生效
    也支持max 和 min
}



//查詢用戶設(shè)置及像素密度
@media screen and (max-resolution:150dpi){
    //當(dāng)設(shè)置是電腦手機(jī)等  同時(shí) 密度小于或等于150dpi的時(shí)候生效此樣式
    同樣支持min 查詢
}

//操作符 and  同時(shí)滿足
@media screen and (max-width:480px){
    //用戶設(shè)備必須的電腦手機(jī)平板等  同時(shí) 可視窗口必須小于或等于480才生效
}

@media screen and (min-width:480px) and (max-width:700px){
    //用戶設(shè)備必須的電腦手機(jī)平板等  同時(shí) 可視窗口必須大于等于480 同時(shí) 小于700才生效
}

//操作符 ， 逗號(hào) 就是或的意思
案例同上

//操作符 not  否的意思
案例同時(shí)
@media not screen{
    //如果用戶設(shè)備不是電腦手機(jī)平板等就生效
}