html - 按钮在媒体查询中没有响应

问题描述

我有一个按钮，可以将您重定向到我努力调试的炒作链接，但我似乎没有找到错误。它在全尺寸屏幕上工作正常，但在我应用的媒体查询上不可点击.

1.首先我试图注释掉汉堡菜单，因为我当时是从一些视频中复制的，但这似乎不是问题。
2.然后我尝试从 max-width 更改为 min-width 它也没有用。
3.我还尝试使用按钮上的 z-index 希望它位于前面，但也没有用。在https://spectrumsdl.com
查看整个网站。在媒体查询视图端口中似乎没有什么可点击的。

@media(max-width:650px) {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: monospace;
    font-size: 12px;
    font-family: mon reg;
    transition: ease-in-out .8s;
  }
  .container {
    width: 100%;
    height: 100vh;
    /* background:wheat; */
  }
  .nav {
    width: 100%;
    height: 100vh;
    /* background-color: white; */
    top: -900px;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: top 0.8s cubic-bezier(1, 0, 0, 1);
  }
  .right {
    height: auto;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .nav ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    justify-content: center;
    align-items: center;
  }
  .nav ul li :hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: .3s;
    color: var(--textColorSecondary);
  }
  li a {
    display: block;
    padding: 14px 14px;
    text-decoration: none;
    color: var(--textColorMain);
  }
  #nav-btn {
    display: block;
    color: var(--bottonColor);
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    height: 2.5em;
    align-items: center;
    margin-bottom: 2em;
  }
  #nav-btn:hover {
    color: var(--mainColor);
    background-color: var(--bottonColor);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    transition: .5s;
  }
  .change {
    top: 0;
  }
  .hamburger-menu {
    width: 100%;
    height: 30px;
    display: flex;
    position: fixed;
    scroll-behavior: none;
    margin-top: 2em;
    top: 1em;
    right: 1em;
    cursor: pointer;
    /* background-color: white; */
    align-items: flex-end;
    flex-direction: column;
    justify-content: space-around;
  }
  .nav-item {
    list-style: none;
    margin: 25px;
    text-decoration: none;
  }
  .line {
    width: 35px;
    /* width: 100%; */
    height: 4px;
    background-color: var(--bottonColor);
    transition: all 0.8s;
  }
  .change .line-1 {
    transform: rotateZ(-405deg) translate(-8px, 6px);
  }
  .change .line-2 {
    opacity: 0;
  }
  .change .line-3 {
    transform: rotateZ(405deg) translate(-8px, -6px);
  }
  /* main-cnt */
  /* 
body{
  background-image:
  linear-gradient(to right ,rgb(96,45,145),rgb(96,45,145, 0.1) ),
  url("../media/background.jpg");
  background-size: cover;
  background-position:center;
  background-repeat: no-repeat;
  background-attachment: fixed;

} */
  main {
    display: block;
    padding: 9em 4em;
    height:
  }
  .main-cnt {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #bookNowBtn {
    float: right;
    padding-top: 10em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  #bookNowBtn button {
    font-size: 12px;
    font-weight: 900;
    font-family: mon semibold;
    /* float: right;; */
    box-shadow: 1px 1px 1px rgb(255, 255, 255);
  }
  #bookNowBtn button:hover {
    box-shadow: 2px 2px 2px 2px rgba(255, 255, 255, 0.63);
    transition: .1s;
  }
  #mainText {
    display: flex;
    flex-direction: column;
    /* padding-top: 7em; */
    color: white;
  }
  #mainText h2 {
    display: flex;
    font-size: 18px;
    /* line-height: 1em; */
    font-family: mon semibold;
  }
  #mainText h2 span {
    color: var(--bottonColor);
    font-size: 18px;
    font-family: mon semibold;
  }
  #mainText p {
    font-size: 15px;
    margin-top: 1em;
  }

<header>
    <div class="container">
        <div class="nav  navbar">
            <div class="hamburger-menu">
                <div class="line line-1"></div>
                <div class="line line-2"></div>
                <div class="line line-3"></div>
            </div>
            <div class="sdlLogo" ">
                <a href="/"> <img src="sdl_logo.svg" alt="sdl_logo" height="75px " width="150px "></a>
            </div>
            <div class="right ">
                <ul>
                    <li class="nav-item active "><a href="/ ">Home</a></li>
                    <li class="nav-item "><a href="about.php ">About</a></li>
                    <li class="nav-item "><a href="service.php ">Services</a></li>
                    <li class="nav-item "><a href="article.php ">Articles</a></li>
                </ul>
                <div>
                    <a href="contact.php "> <button class="btn " id="nav-btn ">Contact Us</button></a>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- main -->
<main>
    <div id="mainText " class="main-cnt ">
        <h2>
            Spectrum <span>Diagnostic</span> Laboratories
        </h2>
        <p>
            Quality results for Quality patient care.
        </p>
    </div>
    <a href="service.php#Mailing " id="bookNowBtn " class="main-cnt ">
      <button class="btn " type="submit ">Book Now!</button>
    </a>
</main>

标签： htmlcssmedia-queries

html - 按钮在媒体查询中没有响应

问题描述

解决方案

推荐阅读