Media Query實(shí)現(xiàn)響應(yīng)式布局的判斷匯總

今天圖趣帶著大家解析下對(duì)于終端分辨率，如何進(jìn)行判斷來(lái)對(duì)頁(yè)面布局的控制。

在講之前我們必須了解下現(xiàn)在目前終端各種分辨率，大伙可以看下圖：

說(shuō)明下：其實(shí)現(xiàn)在我們網(wǎng)頁(yè)的最大寬度一般都不會(huì)超過(guò)1200px的。

從上圖我們可以看到，從移動(dòng)端到PC端的各種設(shè)備終端的分辨率都列舉出來(lái)了，有了這些統(tǒng)計(jì)，我們很輕松的搞定“如何針對(duì)終端分辨率”進(jìn)行頁(yè)面布局：

@media(min-width:1200px)

@media(min-width:980px) and (max-width:1199px)

@media(min-width:980px)

@media(min-width:768px) and (max-width:979px)

@media(max-width:979px)

@media(max-width:767px)

@media(max-width:640px)

@media(max-width:480px)