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

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


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




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

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


<style>
/*直接寫在樣式表里面，當寬度小于480的時候這里面的樣式將會生效*/
@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">
//這次加載的樣式表只能應用與打印機，后面規(guī)定了媒體類型的



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

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

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

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



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

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

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


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

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



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

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

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

//操作符 ， 逗號 就是或的意思
案例同上

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