学习——伪类+js实现css3 media queries跨界准确判断
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习——伪类+js实现css3 media queries跨界准确判断相关的知识，希望对你有一定的参考价值。
本文转自：
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>
以上是关于学习——伪类+js实现css3 media queries跨界准确判断的主要内容，如果未能解决你的问题，请参考以下文章