jqeruy缩放整体html,jQuery实现HTML元素随着浏览器窗口大小变化而动态变化

随着扁平化的流行，我们的网页往往变得更加简单和清晰，但虽然简单，在就在技术上和对开发者的要求上并没有变得简单，反而是变得更加搞的要求；因为整体简单了，就不能让其中有任何瑕疵，让一切都得看上去是精致的。而今天这个解决方案也是基于这样一种需求而来的，虽然标题上是用jQuery来做，实际上原生的JS也能做到；当然用JS的这个框架可能开发效率会更高一点，于是我们下面就以jQuery为例子吧。

那今天这个需求其实非常常见，那就是做一些宽屏全屏幻灯片首页首屏的时候，往往可能上面有一个导航条，而下面就是我们希望铺满全屏的幻灯片。这时候我们就不能够使用固定的尺寸了，因为不同的电脑终端屏幕的分辨率不同，就算是同一台电脑不同的浏览器有效窗口大小也不一样。

如果用CSS来做，你可能在其中遇到一些问题或者感觉似乎不是那么靠谱。而如果使用最基础的JS方式，比如获取窗口大小减去顶部区域的高度从而等到幻灯盒子及幻灯图片的高度，这样其实也会存在一个问题，那就是当用户开始的浏览器是缩放状态的时候，然后他没有刷新网页就让浏览器恢复到全部尺寸，这样我们的幻灯片的高度还是原来的那样，这种体验显然不够好。

因此我们需要的是能够像CSS控制尺寸一样动态地改变元素的大小，也就是我们标题中所说的实现HTML元素随着浏览器窗口大小变化而动态变化，有点儿类似CSS3的响应式。如果你对JS的事件比较熟悉，那可能就会想到resize()事件了。

resize()事件或者说方法是干嘛的，其实看字面上的意思我们就待该知道这是跟重定义(re)大小(size)相关的，官方给它的定义就是：当调整浏览器窗口的大小时，发生 resize 事件。 resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。基本语法如下：

$(selector).resize(function)

//参数:function,可选;规定当发生 resize 事件时运行的函数。

于是我们可以编写如下jQuery代码：

$(function(){

var $wind = $(window); //加载窗口

var $indexBox = $('.index-banner .slideBox'); //加载幻灯片盒子

var $indexImg = $('.index-banner .bd img'); //加载幻灯片img元素

var winH= $wind.outerHeight();//窗口高度

var winW= $wind.outerWidth();//窗口宽度

var headerH= $('#header').outerHeight();//导航高度

var hdh=Math.abs(winH-headerH);

$indexBox.width(winW);

$indexBox.height(hdh);

$indexImg.height(hdh);

//resize事件处理

$wind.resize(function(){

var newW = $wind.outerWidth();

var newH = $wind.outerHeight();

var newHdh=Math.abs(newH-headerH);

$indexBox.width(newW);

$indexBox.height(newHdh);

$indexImg.height(newHdh);

})

})

以上的十多行代码就实现我们我所需要的需求，当然实际应用比上面的可能更为复杂，比如说除了导航高度需要减去外，还可能有一个最上面的管理工具栏(比如wordpress默认状态)等等，有了这个模型我们可以根据应用而举一反三即可。