WEB前端：设置指定元素的宽度随浏览器宽度而变化-漠漠睡的个人博客

我那么讨厌做前端，为啥现在都是在说前段。。哎！！首先，需要使用JQ获取到当前浏览器的宽度$(wind...

我那么讨厌做前端，为啥现在都是在说前段。。哎！！

首先，需要使用JQ获取到当前浏览器的宽度

$(window).width()

然后设定指定元素CSS样式中宽度的代码

$("#demo").css("width","100px")

随后，将两者相结合

$("#demo").css("width",$(window).width())

然后，上演示源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WEB前端：设置指定元素的宽度随浏览器宽度而变化</title>
    <script src="https://blog.mijupai.com/zb_system/script/jquery-2.2.4.min.js" type="text/javascript"></script>
    <style>
        div{width: 500px;height: 500px; margin: 10% auto;background-color: red;}
    </style>
</head>
<body>
    <div></div>
    <script>
$(document).ready(function(){
    $(window).resize(function(){
        $("div").css("width",$(window).width()*0.9)
    })
})
    </script>
</body>
</html>

说明：这里用到了一个$(window).resize()方法，用来监控当前浏览器，而且该元素属于必不可少的那种！