响应式onresize监听窗口大小

Onresize是框架/对象(Frame/Object)事件中的一个属性,窗口或框架被重新调整大小。或监听窗口被重新调整了大小。

1、以下 HTMl 标签支持 onresize事件
<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var> 

除了 window 对象,其他 html 标签好像并不支持 onresize 事件,定义了之后并不会触发。
2、当浏览器窗口大小改变的时候将会触发onresize事件。
可以监控该事件的发生做一些响应式的处理:
(1)语法:js
window.onresize(function(){
//code
)}
(2)语法:jQuery
$(window).resize(function(){
//code
});
3、onresize 事件通过监听对象的高和宽。在这里插入图片描述
当你任意调整窗口大小时,实际浏览器的 onresize事件可能会触发 n 次,,并且返回值打印出来的数据类型是一个整形。
在多次触发中可能会卡死,尤其是在性能低下的IE上若每次触发都执行是个大问题。
所以性能上的问题并没有得到解决
clientWidth:在页面上返回内容的可视宽度(不包括边框,边距或滚动条)
clientHeight:在页面上返回内容的可视高度(不包括边框,边距或滚动条)
该例显示浏览器窗口内部body的高度和宽度。

猜你喜欢

转载自blog.csdn.net/weixin_44560799/article/details/108282692