学习——伪类+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);  //javascript实现窗体改变事件resize的操作

    funImage();
} else {
    oDemo.innerHTML = '<img src="http://image.zhangxinxu.com/image/emtion/litter-sad.png" /><p>对不起，您的浏览器目前还不支持该功能！</p>';
}
</script>

</html>

posted @ 2016-03-02 13:30 cacti_vc 阅读(252) 评论(0) 编辑收藏举报

刷新页面返回顶部

cacti_vc

学习——伪类+js实现css3 media queries跨界准确判断

公告