css3 media媒體查詢

語法

@media Media-Type Media-Query (Media-Feature) {
    CSS-Code;
}

Media-Type媒體類型，常見的有all，screen（屏幕），print（打印機）等；

Media-Query媒體查詢添加，包括and，not（排除某種媒體），only（限制某種媒體）；

Media-Feature媒體特徵，經常使用的是min-width，max-width最小最大判斷條件；

###1 最經常使用的引入方式

link方式

<link rel="stylesheet" type="text/css" href="" media="screen">

@media引入

@media screen {
    
}

###2 媒體特性使用

Max Width

@media screen  and (max-width: 960px){
    //表示當屏幕小於或等於960px的時候，將採用此樣式
}

Min Width

@media screen and (min-width: 960px) {
    //表示當大於或等於960px的時候，講採用此樣式
}

多條件

@media screen and (min-width:900px) and (max-width:960px) {
    //表示當位於900~960px區間時，採用此樣式
}

上面所說的是瀏覽器寬度

設備可視區寬度Device Width

@media screen add (max-device-width: 480px) {
    //此樣式適用於最大設備寬度爲480px
}