本文转自：
http://www.zhangxinxu.com/wordpress/?p=2387
media queries可以让设备在不同尺寸下应用不同的css样式、布局等。以适应手持设备、普屏显示器、宽屏显示器，以及未来冰箱上的联网显示器，汽车上的数码设备等。然后，仅仅通过css做布局可能无法应对所有的交互请求。
举个简单的例子，我们打开浏览器可能处于非最大化状态，此时，如果作为普屏处理，加载的图片可能就是128*128的小尺寸图片。但是，当我们最大化以获得更好阅读体验的时候，需要使用更大尺寸的图片256*256，
使用media queries？拜托，css只能改变外在的尺寸，你难道要2倍尺寸拉伸？显然，更合理的做法是加载256*256尺寸的中等尺寸图片。以目前的技术而言，估计除了使用js修改图片src外，很难有其他更可用的方法了。
OK，现在问题来了，如何让js的修改与css布局改变同步呢？
二、css交互与js交互同步问题
如何让css样式、布局改变的时候，同时准确触发js的交互呢？
方法一、直接宽度/高度值匹配
何意？css3 media queries跨界触发一般都有一个宽度或高度值，或是color（很少使用）。例如，普屏图片宽度128*128，可能就是如下css：
@media screen and (max-width: 1024px) {
img {
width: 128px;
height: 128px;
}
}
意思就是screen（屏幕）宽度不超过1024像素的时候，图片宽度是128像素，高度也是128像素。
因此，我们可能通过浏览器窗口尺寸改变的resize事件中捕获浏览器窗口尺寸，与1024对比，如果小于则触发对应的普屏事件处理，大于，则宽屏处理。
window.addEventListener("resize",function(){
//window.innerwidth IE9+浏览器支持
if(window.innerWidth<=1024){
//普屏处理
}else{
//宽屏处理
}
});
确实是简单高效的方法。但是，也有不足的。
1、可维护性
一个载体所对应的数值是会经常变的。例如，小胖今天体重148斤，明天喝碧生源厕所来回几个小时，可能只有145斤了。同样的，对于1024这个值，变动的几率是很大的。变动其实没什么，麻烦的是下面的JS中的判断的数值与css中的限制是要一致的。也就是css宽度阈值改变，js也要跟着变。显然，这种高耦合增加了后期的维护成本。
2、宽度的计算与不确定性
window.innerWidth返回的是窗口内部宽度（不包括浏览器的框框），单位是像素。但是，width属性的单位并不固定。有些站点，可能使用em，%或最新的vw,rem,in等。
而这些单位的宽度转换成px就需要计算，而这些单位很多是相对的，例如em是与字体大小相关的，例如em是与字体大小相关的，如果网页的字体大小被用户手动改变（视力不佳用户，或是"Ctrl+加号"），可能你之前按照12像素比例的宽度计算就会不准确。这就是宽度计算的不确定性。
方法二、body标签+伪类+content内容生成
因为每个页面都有body标签，在该标签上打标记便于整站通用。
这里的伪类指:after,：before亦可，因为，使用该css属性与实际用途冲突概率要比z-index属性小多了，更加安全。
使用content内容生成的最大好处在于，我们可以随意定义里面的内容（z-index只能数值），例如：
{content:"普屏";}
显然，这个描述性的文字是很泛的，概括性强，不会因为因为1024px变成980px而跟着变动，而且，含义明显，一目了然。
因此，上面的一番分析总结，body：after+content是相当好的一个方法。
我们唯一剩下的技术难点就是如何使用JS获取content的内容。
使用方法就是标题中的getComputedStyle:
var content=window.getComputedStyle(document.body,":after").getpropertyvalue("content");
然后，我们就可以根据content的具体内容，准确捕获media queries越界的瞬间，并作出相关的js交互了！
if (content === "窄屏") {
// ……
} else if (content === "普屏") {
// ……
} else if (content === "宽屏") {
// ……
}
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>_伪类+js实现CSS3 media queries跨界准确判断实例页面</title>
<script src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
/*.demo img{ width:512px;}*/
@media screen and (max-width:1024px){
body:after{ display:none; content:‘normalscreen‘;}
/*.demo img{ width:256px;}*/
}
</style>
</head>
<body>
<div id="demo" class="demo"></div>
</body>
<script>
var oDemo = document.getElementById("demo"), oImage = null, screenTypeCache; //声明变量
var funImage = function() {
var screenType = window.getComputedStyle(document.body, ":after").getPropertyValue("content"); //获取body伪类里content的内容
if (screenTypeCache !== screenType) {
var src = "http://image.zhangxinxu.com/image/study/s/"+ (/normalscreen/.test(screenType)? "s256": "s512") +"/mm1.jpg";
if (oImage === null) {
oImage = document.createElement("img");
oDemo.appendChild(oImage);
}
oImage.src = src;
screenTypeCache = screenType;
}
};
if (window.getComputedStyle) {
window.addEventListener("resize", funImage);
funImage();
} else {
oDemo.innerHTML = ‘<img src="http://image.zhangxinxu.com/image/emtion/litter-sad.png" /><p>对不起，您的浏览器目前还不支持该功能！</p>‘;
}
</script>
</html>