概念

布局視口( layout viewport ): 頁(yè)面內(nèi)容的大小
可視視口( visual viewport ): 設(shè)備的屏幕大小，會(huì)根據(jù)縮放動(dòng)態(tài)的調(diào)整
理想視口( ideal viewport ): 默認(rèn)寬度為960px左右,假設(shè)設(shè)置了<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">，那么理想視口會(huì)等于布局適口

栗子

@media only screen and(minwidth){
}

@media代表啟用媒體查詢
only的作用是針對(duì)于不支持媒體查詢的老舊瀏覽器版本，讓瀏覽器忽略掉{}中書(shū)寫(xiě)的樣式，@media only screen在老舊瀏覽器中會(huì)被識(shí)別為@media only，瀏覽器無(wú)法找到名為only的設(shè)備，所以大括號(hào)中的樣式不會(huì)被應(yīng)用，而在支持媒體查詢的瀏覽器中@media only screen會(huì)被識(shí)別為@media screen，也就正常通過(guò)了。