JS响应式布局 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        body{
            background: pink;
        }
        div{
            font-size:200px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
         $(function(){
            function fn(){
                var W = $(window).width();
                $("div").html(W);
                if(W > 1200){
                    $("body").css("background","red");
                }else if(W > 640 && W < 1199){
                    $("body").css("background","green");
                    $("img").css("display","none");
                }else if(W < 639){
                    $("body").css("background","blue");
                }
            }
            fn();
            $(window).resize(fn);
         });
    </script>
</head>
<body>
    <div></div>
    <img src="https://img.alicdn.com/tps/TB1xrlgLpXXXXcZXpXXXXXXXXXX-170-280.jpg" alt="" />
</body>
</html>

posted on 2017-04-24 15:58  37℃的冰  阅读(152)  评论(0)    收藏  举报

导航