自适应窗口的CSS和jQuery设置
Posted 辅助园地
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自适应窗口的CSS和jQuery设置相关的知识，希望对你有一定的参考价值。
网页中的图片随着窗口的大小而改变大小，这可以视作为自适应吧。今天，我就来做个demo。
首先，写个div：
<div id="resize_div">
<img />
</div>
然后，给这个resize_div加css吧
body{
width:1000px;
margin:auto;
}
#resize_div{
width:100%;
display:flex;
flex-direction:row;
justify-content:center;
}
#resize_div img{
width:80%;
height:80%;
}
接下来，就是通过jquery来实现自适应的过程了。
整理下思路，窗口大小的改变应该是resize事件，所以div自适应的设置应该在这个事件里完成，窗口的resize事件：$(window).resize(function(){...})。
自适应的值应该是改变div的width，而改变div的width写法是:
$("#div名称").css({
"width":要赋的值
})
所以完整的写法是：
$(window).resize(function() {
if($(document).width()>1000)
{
$("#resize_div").css({
"width":1000+"px"
});
}
else
{
$("#resize_div").css({
"width":$(window).width()
});
}
});
效果如下：
（1）完全打开的网页
（2）窗口改变后的网页
这样就达到了我的要求，不知各位亲怎么想呢？
以上是关于自适应窗口的CSS和jQuery设置的主要内容，如果未能解决你的问题，请参考以下文章