Media Query实现响应式布局的判断汇总

我们之前谈过一篇关于“[实战]使用Media的文章 Query实现了响应性Web布局”，谈到了很多响应布局，今天我分析了终端分辨率，如何判断页面布局的控制。

在谈话之前，我们必须了解当前终端的各种分辨率，您可以看到下图：

说明:其实我们网页的最大宽度一般不超过1200px。

从上图可以看出，各种设备终端从移动终端到PC终端的分辨率已经列出。有了这些统计，“如何针对终端分辨率”的页面布局，我们很容易做到：

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