关于IE浏览器不能实现@media，提供一种思路和办法

首先来讲，在IE浏览器中，关于自适应布局有时候客户就会要求兼容到低版本。还要适应不同的分辨率，其实是很痛苦的一件事。

在做一个网页的时候，采用了@media screen的方式布局，但是在IE浏览器上是不生效的，在网上查了很多，倒入各种东西，但是还是不起效果，

有些也就看不懂到底是怎么回事。

现在下面提供一种解决问题的思路和办法。在HTML的head中写上这么一句话

<!--[if  IE]>

<script src="XXX.js"></script>

<[end if]-->

js文件是这样的，用window.onload来实现加载完成之后再添加属性，而box是我写的网页最外层盒子。

window.onload = function () {

    function  getWidth(){

        var winWidth;

        var winHeight;

  if (window.innerWidth)

  winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

    winWidth = document.body.clientWidth;

  // 通过深入 Document 内部对 body 进行检测，获取窗口大小

if ( document.documentElement && document.documentElement.clientWidth)

      {

    winHeight = document.documentElement.clientHeight;

    winWidth = document.documentElement.clientWidth;

      }

  return winWidth; 

      }

    var width_true=getWidth();

      function fontsize_change(winWidth){

if(winWidth>=1680){   

        document.getElementById('box').style.fontSize="20px";         

  }

else  if(winWidth>=1366&&winWidth<1680){       

          document.getElementById('box').style.fontSize="16px";         

    }

else  if(winWidth>=1200&&winWidth<1366){      

          document.getElementById('box').style.fontSize="13px";     

  }

else if(winWidth<1200){  

        document.getElementById('box').style.fontSize="12px";       

  }

      }

    fontsize_change(width_true);

      };

这样的话，在一定程度上能解决自适应，当然上面写的方法获取的是网页宽度，而不是屏幕分辨率，也许用分辨率会更好一点。

但是这个跟@media还有区别，这个只是在网页加载之后只执行一次，若是想要随着网页宽度更改布局，也可以再写一个函数当网页宽度改变时候，触发这个函数，进行判断，从而实现自适应。这样可以完美解决IE自适应。