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

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

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

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

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

@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)