如何使我的徽标和光标响应？答案

【问题标题】：How to make my logo and cursor responsive?如何使我的徽标和光标响应？
【发布时间】：2020-07-06 06:13:28
【问题描述】：

我需要一些关于此页面的帮助。它适用于笔记本电脑和台式机，也适用于移动版，但是当我切换不同的窗口大小，移动版和桌面版之间的所有尺寸时，我的徽标和光标不会停留在同一位置，他们都向右移动到整个窗口！我将发布一个视频链接，以便您准确理解我的意思。我知道我的代码有问题，但我不明白如何解决这个问题。正如您将在视频链接和 JSFiddle 链接上看到的那样，当我调整窗口大小时，徽标向右移动，位于页面右侧某处，光标不在“ PRESS”，但它位于“ENTER”一词下，只要我调整窗口大小，它就会向右移动。仅当我处于移动模式和桌面模式时，徽标和光标才会保持静止。提前谢谢你！

Video Link

JSFiddle link

这是我的 JS 和 CSS，下面是我的 HTML。

<script>
          $(function() {
        var cursor;
        $('#cmd').click(function() {
          $('input').focus();
          cursor = window.setInterval(function() {
            if ($('#cursor').css('visibility') === 'visible') {
              $('#cursor').css({
                visibility: 'hidden'
              });
            } else {
              $('#cursor').css({
                visibility: 'visible'
              });
            }
          }, 500);

        });

        $('input').keyup(function() {
          $('#cmd span').text($(this).val());
        });

        $('input').blur(function() {
          clearInterval(cursor);
          $('#cursor').css({
            visibility: 'visible'
          });
        });
      });



      $( document ).ready(function() {
        $( "#cmd").trigger( "click" );
      });


    </script>

/*My Index */

#MyBackground {
    
    opacity: 0.6;
 
    /* Pacific Dream */
    background: #34e89e; 
    background: -webkit-linear-gradient(to right, #0f3443, #34e89e);  
    background: linear-gradient(to right, #0f3443, #34e89e);  
}

/* Aurora Logo */
.OurLogo {
    width: 10%;
    margin-left: 75em;
    margin-top: 11em;
}
    

html{
  height: 100%;
  width: 100%;
 }
 
 body{
  width: 100%;
  height: 100%;
 } 


.containersearchfunction{
  
  position: absolute;
  
 
}

/* The Main Text */
.EnterAText {
    color: rgb(144, 144, 160);
    text-align: center;
   
}
input.form-control.border-0 {
   
    background-color: white;
    
    height: 10em;
}
h2 {
    margin-top: 7em;
    color: rgb(255, 255, 255);
    
}

#cmd {
    font-family: courier;
    font-size: 14px;
    background: black;
    color: #FFFFFF;
    padding: 5px;
    overflow: hidden;
  }
  #cmd span {
    float: left;
    padding-left: 3px;
    white-space: pre;
  }
  #cursor {
  
    width: 1px;
    height: 84px;
    /* background: #21f838; */
    background: #FFFFFF;
    
  }
  input {
    width: 0;
    height: 0;
    opacity: 0;
    
  }
  div#cmd {
    padding-left: 10em;
    background: transparent;
  
    font-size: 4em;
  }

  /* When i resize the page */
  @media(max-width: 767px){
    div#cmd {
        padding-left: 4em;
        font-size: 4em;
      }
      

      .OurLogo {
        width: 10%;
        margin-left: 24em;
        margin-top: 9em;
        width: 20%;
    }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
   integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
 
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
   integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 

 
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
 
 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

 <link href="style.css" rel="stylesheet" type="text/css" />

    <title>Aurora 4.0 Search Button Page</title>
</head>

<body id="MyBackground">
    

  <div container-fluid class="containersearchfunction">
    <div class="specific-div">
      <div class="EnterAText">
        <h2>TYPE AND PRESS “ENTER” TO SEARCH</h2>
        
        <div id="cmd">
          <span></span>
          <div id="cursor"> </div>

        </div>
      </div>
      <input type="text;" name="command" value=""/>
    </div>
    <div><img class="OurLogo" src="aurora_logoFINAL-01.png" alt="AuroraLogo"></div>
  </div>
           
</body>


</html>

【问题讨论】：

由于您希望您的徽标始终位于屏幕（视口）的右下角，您可以尝试用类似这样的东西替换您当前的徽标样式 - .OurLogo{position: fixed; right:10px; bottom:10px;}
不幸的是，这只适用于某一点，而不是在我调整窗口大小时始终有效..
您的 sn-p 在这里不起作用，我看到一个错误。如果您可以创建一个 minimal 工作示例（例如在 JSFiddle 上），您将获得更好的响应，我们可以使用和调查。
刚刚做到了！感谢您的信息！
@Don'tPanic 他需要把他的代码放在这里而不是 jsfiddle

标签： jquery html css twitter-bootstrap flexbox

【解决方案1】：

由于没有人回答我的问题，而且我认为我找到了答案，我想发布我的更新代码，它似乎可以工作并且它完全符合我的要求。我不知道代码是否正确，虽然它正是我想要的，所以如果不是，请纠正我！

这是它现在的样子的视频链接！查看光标和徽标。当我将页面从移动版切换到桌面版时，它们保持不动。

Video Link

下面是我的 JS、我的 CSS 和我的 HTML

  <script>
      $(function() {
        var cursor;
        $("#cmd").click(function() {
          $("input").focus();
          cursor = window.setInterval(function() {
            if ($("#cursor").css("visibility") === "visible") {
              $("#cursor").css({
                visibility: "hidden"
              });
            } else {
              $("#cursor").css({
                visibility: "visible"
              });
            }
          }, 500);
        });

        $("input").keyup(function() {
          $("#cmd span").text($(this).val());
        });

        $("input").blur(function() {
          clearInterval(cursor);
          $("#cursor").css({
            visibility: "visible"
          });
        });
      });

      $(document).ready(function() {
        $("#cmd").trigger("click");
      });
    </script>

.banner {
  height: 0px;
  max-width: 800px;
  margin: 13em auto 40px auto;
  background-color: blue;
  display: flex;
  text-align: center;
}

.center-me {
  color: white;
  font-size: 25px;
  margin: auto;
}

#MyBackground {
  opacity: 0.6;
  background: #34e89e;
  background: -webkit-linear-gradient(to right, #0f3443, #34e89e);
  background: linear-gradient(to right, #0f3443, #34e89e);
}

#cmd {
  display: flex;
  font-size: 14px;
  color: #ffffff;
  padding: 5px;
  overflow: hidden;
}
#cmd span {
  margin-top: -0.4em;
  white-space: pre;
}
#cursor {
  width: 1px;
  height: 84px;
  margin-top: 0em;
  /* background: #21f838; */
  background: #ffffff;
}
input {
  width: 0;
  height: 0;
  opacity: 0;
  margin-top: -1em;
}
div#cmd {
  padding-left: 2em;
  background: transparent;
  font-size: 4em;
}

/* Aurora Logo */
img.OurLogo {
  max-width: 10%;
  display: flex;
  position: fixed;
  right: 10px;
  bottom: 10px;
}

<body id="MyBackground">
    <div class="banner">
      <div class="center-me">
        <h2>TYPE AND PRESS “ENTER” TO SEARCH</h2>
        <div id="cmd">
          <span></span>
          <div id="cursor"></div>
          <input type="text;" name="command" value="" />
        </div>
      </div>
    </div>

    <footer>
      <div class="logo">
        <img class="OurLogo" src="aurora_logoFINAL-01.png" alt="AuroraLogo" />
      </div>
    </footer>
  
    <input type="text" onkeyup="this.value = this.value.toUpperCase();" />
  
  </body>
</html>

【讨论】：