@media原理

平时我们都习惯使用@media媒体查询来做响应式，但是实际上需要根据对应的@media媒体查询的大小变化做一些相应的功能（大于某个像素时实现一个功能，小于某个像素时实现另一个功能），这样只能用js实现相关的功能，因此必须要清楚下面几个知识点。

@media相关知识

@media screen and (max-width: 480px){
body {
    background: #FF0;
  }}

对与这样一段代码中的宽度480px,这个宽度到底是什么宽度呢，也就是我所写的js功能到底是监测哪个宽度的改变呢？

实际上在这一例中所说的宽度是视口的宽度不得大于480像素(我们知道宽度包括视口宽度和屏幕宽度等等，有时候甚至这些宽度只是有一点点的区别而已，但是我们实际上写代码时却要区分开来)。

@media all and (max-device-width: 480px) {
  body {
    background: #FF0;
  }
}

像这个例子，所说的宽度就是设备的宽度了。

视口的宽度/高度（width/height）使用documentElement.clientWidth/clientHeight来衡量，单位是CSS像素；设备的宽度/高度（device-width/device-height）使用screen.width/height来衡量，单位是设备硬件的像素。

以上都从大佬的这篇文章总结出来(原理这篇文章写的很详细)：

http://www.mamicode.com/info-detail-2045295.html

在没看这篇文章之前一直都想着根据某个宽度的改变写相关的js功能，但是看过这篇文章以后，知道了@media的实现原理，并且可以根据@media的实现原理直接在里面写自己的功能，避免的各种判断带来的复杂性，个人觉得@media原理很有用，在这安利给大家。

以下是我根据这篇文章实现自己的简单功能（代码有点重复，可忽略）：

有什么不对的地方欢迎大家提出来咯，谢谢。