Question

我这里有一个页面，里面有2个元素，并且在运行时引导，但我没有让第一个元素响应。
第一个元素是一个带有Lazy Line Painter路径动画的SVG，它拒绝对编写的代码做出响应，在调整窗口大小时不会移动，我需要帮助。

2nd Element是一个响应迅速并且看起来很棒的标题。

问题是：如何使第一个元素像第二个一样运行，因此响应而不是固定（因为在调整窗口大小时似乎已修复）

HTML：

    <!DOCTYPE html>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Oswald:700'>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>The Code Home</title>
            <!--CSS Start-->
            <link rel="stylesheet" type="text/css" href="css/animate.css">
            <link rel="stylesheet" type="text/css" href="css/main.css">
            <!--CSS End-->
            <!--Scripts Start-->
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script src="js/jquery.lazylinepainter-1.4.1.js"></script>
            <script src="js/raphael-min.js"></script>
            <script src="js/main.js"></script>
            <!--Scripts End-->
        </head>
        <body>
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div id="pencilandbrackets"></div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div id="title" class="animated bounceInDown">The Code Home</div>
                    </div>
                </div>
            </div>



            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        </body>

CSS：

    /*=======MAIN CSS=======*/

body { 
    background:#2ecc71;

}

#pencilandbrackets {
    position: absolute;
    top:-170px;
    left:200px;

    display: block;
}

#title {
    font-family: 'Oswald', sans-serif;
    font-size: 4.13em;
    position: fixed;
    top:40%;
    left:50%;
    margin: -1.0em 0px 0px -3.2em;
    color: #2c3e50;
    display: block;
}

.lazy-line svg {
  width:300% !important;
}

Answer 1

您可以创建一个新的@media查询，其中包含您要隐藏此元素的最大宽度，然后对要隐藏的元素使用display: none;。

如何在调整窗口大小时使元素移动（使用引导程序）？

1 个答案: