您的位置：首页 > 其它

如何使页面中元素的尺寸动态变化适应页面

2017-02-17 00:00 239 查看

页面中想要一个div的高度等于一个计算后的值（因为为了适配不同尺寸），我们可以这样写：

varmapH= $(window).height()-290+'px'
$(".map").height(mapH)[或者这样写
$(".map").css(“height”,mapH)
]

但是问题是 这样写的话只有当页面载入时是有效的，也就是计算一次，如果浏览器窗口人为拉动改变大小并不能使当前计算的对象自适应更改，除非改动窗口后再次刷新页面使脚本起作用。

解决办法是 使用jquery中resize()方法，这个方法的意思是当窗口缩放时触发resize(function(){…})中的事件，看起来问题解决了

但，问题是 这个方法只在页面缩放时才能触发事件，页面刚载入时由于页面没有缩放，所以里面的脚本并不能运行，只有当页面缩放时才起作用。

解决办法可以是 在resize()里面外面都写上同样的脚本，这样就可以载入和缩放窗口时都能起作用，这样问题确实是解决了

但，问题却是 这样写只有当脚本量少的时候还行，如果多的话在一个写完还要复制到另一个地方，明显效率还是误错性上都不合理

解决办法居然是 写一个函数，之后再，resize()里面外面分别调用这个函数即可，这样只要写一遍函数就可以了

function fit(){//[写一个fit()函数]
varmapH= $(window).height()-290+'px'
$(".map").height(mapH)
}
fit()//[外面调用]
$(window).resize(function(){//[Resize()里面调用]
fit()
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 适应

相关文章推荐

新的分享

章节导航