尝试使用媒体查询使标题图像响应

问题描述 投票：0回答：1

我正在使用 Bootstrap 5 制作一个网站，我正在尝试使用媒体查询使网站的标题图像响应。我喜欢它在台式机、笔记本电脑和平板电脑视口上的外观，但在移动设备上，我无法像在其他视口中那样使文本和按钮很好地适应。

这就是桌面上的样子

这就是手机上的样子

HTML

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

<title>Home | </title>

<!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/test17.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->
<!-- <link rel="stylesheet" href="./css/login-modal.css"> -->
<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
        <link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


  </head>
  <body>
    
    <!-- NAVIGATION BAR START -->
    <nav class="navbar navbar-expand-lg navbar-light py-3 sticky-top" id="navbar-color">
      <div class="container">
        <a href="/Bootstrap-/index.html">
          <img src="./src/img/logo-topnav.png" height="45" width="225" class="img-fluid"/>
        </a>

        <!-- TOGGLE MENU START -->
        <button
          type="button"
          class="navbar-toggler"
          data-bs-toggle="collapse"
          data-bs-target="#navmenu"
        >
          <span class="navbar-toggler-icon">
        </button>
        <!-- TOGGLE MENU CLOSE -->

        <!-- TOGGLE MENU START -->
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a href="/Bootstrap-/index.html" class="nav-link text-white" id="nav_object">Home</a></li>
        <li class="nav-item"><a href="/Bootstrap-/about.html" class="nav-link text-white" id="nav_object">About</a></li>
        <li class="nav-item dropdown" id="dropdown">
          <a class="nav-link text-white" href="/Bootstrap-/services.html" role="button"  aria-expanded="false" id="servicesDropdown">
          Services
          </a>
          <ul class="dropdown-menu">
          <!-- <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li> -->
          <!-- <li><hr class="dropdown-divider"></li> -->
          <li><a class="dropdown-item text-capitalize text-white" href="/Bootstrap-/cctv.html">CCTV Services</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/datacenter.html">Datacenter Support</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/digital-signage.html">Digital Signage</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/gen-support.html">General Support</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/net-support.html">Network Support</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/pos.html">POS Services</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/telecom.html">Telecom Services</a></li>
          
          </ul>
        </li>
        <li class="nav-item"><a href="/Bootstrap-/contact.html" class="nav-link text-white" id="nav_object">Contact</a></li>

        <script>
          // Get the Services dropdown link element
          const servicesDropdown = document.getElementById('servicesDropdown');
        
          // Redirect to the services page when the dropdown link is clicked
          servicesDropdown.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default link behavior
            window.location.href = this.getAttribute('href');
          });
        
          // Add the hover effect on desktop devices
          if (window.matchMedia('(min-width: 576px)').matches) {
            // When the mouse enters the dropdown link, show the dropdown menu
            servicesDropdown.addEventListener('mouseenter', function() {
              this.setAttribute('aria-expanded', 'true');
              this.nextElementSibling.classList.add('show');
            });
        
            // When the mouse leaves the dropdown link or the dropdown menu, hide the dropdown menu
            servicesDropdown.addEventListener('mouseleave', function() {
              this.setAttribute('aria-expanded', 'false');
              this.nextElementSibling.classList.remove('show');
            });
          }
        </script>
        <!-- TOGGLE MENU CLOSE -->

       
        </ul>
      </div>
      <!-- TOGGLE MENU CLOSE -->
      </div>
    
    </nav>
    <!-- NAVIGATION BAR CLOSE -->

    <!-- SHOWCASE START -->
    <section>
      <div id="herocarousel" class="carousel slide" data-bs-ride="carousel" >
        
        <div class="carousel-inner">
          <div class="carousel-item active c-item">
          <img src="../src/img/networking-connections-004.jpeg" class="d-block w-100 c-img" alt="...">
          <div class="carousel-caption ">
            
            <h1 class="display-1 fw-bolder text-capitalize">Project___ Name_____</h1>
            <h4 class=" text-uppercase" id="sub-header">Get your unique solution</h4>
            <a href="/Bootstrap-/ticket-form.html" >
              <button type="button"
              class="btn btn-primary px-4 py-2 fs-5 " 
              id="button"
            >
              Submit&nbsp;a&nbsp;Ticket
              

            </button>
            </a>
            
            </div>
          
        
        </div> 
      <!-- class="bg-dark text-white text-center text-sm-start p-5 p-lg-0" -->
      <!-- <div class="container">
        <div class="d-flex align-items-center justify-content-center">
          <div>
            <h1><span class="text-primary">Project___ Name_____</span></h1>
            <p class="lead py-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
              voluptatum, voluptate, quibusdam, quia voluptas quod quos
              exercitationem quae voluptatibus doloribus quidem. Quisquam
              voluptatum, voluptate, quibusdam, quia voluptas quod quos
              exercitationem quae voluptatibus doloribus quidem.
            </p>
            <button type="button" class="btn btn-primary">Get Quote</button>
        </div>
        <img src="./src/img/logo-topnav.png" alt="" class="img-fluid d-none d-lg block"/>
      </div> -->
    </section>
    <!-- SHOWCASE CLOSE -->
  </body>
</html>

CSS

:root {
    --desktop-min: 1200px;
    --laptop-min: 900px;
    --laptop-max: calc(var(--desktop-min) - 1px);
    --tablet-min: 720px;
    --tablet-max: calc(var(--laptop-min) - 1px);
    --mobile-min: 300px;
    --mobile-max: calc(var(--tablet-min) - 1px);
    }

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler {
    border: 1px solid hsl(0, 0%, 100%);
    outline: none;
    box-shadow: none;
}

.carousel-inner img {
    width: 100%;
    height: 100%;
    filter: brightness(0.6);
}

.carousel-caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
}

.carousel-caption h1 {
    font-size: 500%;
    transform: uppercase;
    text-shadow: 1px 1px 15px hsl(0, 0%, 0%);
    
}

.carousel-caption h4 {
    font-size: 200%;
    font-weight: 500;
    padding-bottom: 1rem;
    text-shadow: 1px 1px 10px hsl(0, 0%, 0%);
    
}

/* .btn-primary {
    background-color: hsl(18, 100%, 62%);
    border-color: 1px solid hsl(18, 100%, 62%);
}

.btn-primary:hover {
    background-color: hsl(18, 100%, 62%);
    border-color: 1px solid hsl(18, 100%, 62%);
} */


#button {
    background-color:hsl(18, 100%, 62%);
    border: 1px solid hsl(18, 100%, 62%);
}

#button:hover {
    background-color:hsl(24, 83%, 65%);
    border: 1px solid hsl(24, 83%, 65%);
}

@media screen and (min-width: var(--laptop-min)) and (max-width: var(--laptop-max)) {
    
    
    .carousel-caption {
        top: 50%;
    }
    
    .carousel-caption h1 {
        padding-top: 15px;
    }
    
    .carousel-caption h4 {
        font-size: 140%;
        font-weight: 400;
        padding-bottom: .2rem;
        
        
    }
    #button {
        font-size: 95%;
        padding: 8px 14px;
    }
}
@media screen and (min-width: var(--tablet-min)) and (max-width: var(--tablet-max)) {
    .carousel-caption {
        top: 50%;
    }
    
    .carousel-caption h1 {
        font-size: 350%;
        padding-top: 10px;
        
        
        
    }
    
    .carousel-caption h4 {
        padding-bottom: .1rem;
        
        
    }
    .carousel-caption .btn {
        font-size: 95%;
        padding: 8px 14px;
        
    }
}

@media screen and (min-width: var(--mobile-min)) and (max-width: var(--mobile-max)) {
    .carousel-caption {
        top: 40%;
    }
    
    .carousel-caption h1 {
        font-size: 250%;
        padding-top: 10px;
        
        
        
    }
    
    .carousel-caption h4 {
        font-size: 110%;
        
        
    }
    .carousel-caption .btn {
        font-size: 90%;
        padding: 4px 8px;
        
    }

    .carousel-indicators {
        display: none;
    }
}


:root {
    --desktop-min: 1200px;
    --laptop-min: 900px;
    --laptop-max: calc(var(--desktop-min) - 1px);
    --tablet-min: 720px;
    --tablet-max: calc(var(--laptop-min) - 1px);
    --mobile-min: 300px;
    --mobile-max: calc(var(--tablet-min) - 1px);
    }

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler {
    border: 1px solid hsl(0, 0%, 100%);
    outline: none;
    box-shadow: none;
}

.carousel-inner img {
    width: 100%;
    height: 100%;
    filter: brightness(0.6);
}

.carousel-caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
}

.carousel-caption h1 {
    font-size: 500%;
    transform: uppercase;
    text-shadow: 1px 1px 15px hsl(0, 0%, 0%);
    
}

.carousel-caption h4 {
    font-size: 200%;
    font-weight: 500;
    padding-bottom: 1rem;
    text-shadow: 1px 1px 10px hsl(0, 0%, 0%);
    
}

/* .btn-primary {
    background-color: hsl(18, 100%, 62%);
    border-color: 1px solid hsl(18, 100%, 62%);
}

.btn-primary:hover {
    background-color: hsl(18, 100%, 62%);
    border-color: 1px solid hsl(18, 100%, 62%);
} */


#button {
    background-color:hsl(18, 100%, 62%);
    border: 1px solid hsl(18, 100%, 62%);
}

#button:hover {
    background-color:hsl(24, 83%, 65%);
    border: 1px solid hsl(24, 83%, 65%);
}

@media screen and (min-width: var(--laptop-min)) and (max-width: var(--laptop-max)) {
    
    
    .carousel-caption {
        top: 50%;
    }
    
    .carousel-caption h1 {
        padding-top: 15px;
    }
    
    .carousel-caption h4 {
        font-size: 140%;
        font-weight: 400;
        padding-bottom: .2rem;
        
        
    }
    #button {
        font-size: 95%;
        padding: 8px 14px;
    }
}
@media screen and (min-width: var(--tablet-min)) and (max-width: var(--tablet-max)) {
    .carousel-caption {
        top: 50%;
    }
    
    .carousel-caption h1 {
        font-size: 350%;
        padding-top: 10px;
        
        
        
    }
    
    .carousel-caption h4 {
        padding-bottom: .1rem;
        
        
    }
    .carousel-caption .btn {
        font-size: 95%;
        padding: 8px 14px;
        
    }
}

@media screen and (min-width: var(--mobile-min)) and (max-width: var(--mobile-max)) {
    .carousel-caption {
        top: 40%;
    }
    
    .carousel-caption h1 {
        font-size: 250%;
        padding-top: 10px;
        
        
        
    }
    
    .carousel-caption h4 {
        font-size: 110%;
        
        
    }
    .carousel-caption .btn {
        font-size: 90%;
        padding: 4px 8px;
        
    }

    .carousel-indicators {
        display: none;
    }
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home | </title>

<!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/test17.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->
<!-- <link rel="stylesheet" href="./css/login-modal.css"> -->
<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
        <link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


  </head>
  <body>
    
    <!-- NAVIGATION BAR START -->
    <nav class="navbar navbar-expand-lg navbar-light py-3 sticky-top" id="navbar-color">
      <div class="container">
        <a href="/Bootstrap-/index.html">
          <img src="./src/img/logo-topnav.png" height="45" width="225" class="img-fluid"/>
        </a>

        <!-- TOGGLE MENU START -->
        <button
          type="button"
          class="navbar-toggler"
          data-bs-toggle="collapse"
          data-bs-target="#navmenu"
        >
          <span class="navbar-toggler-icon">
        </button>
        <!-- TOGGLE MENU CLOSE -->

        <!-- TOGGLE MENU START -->
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a href="/Bootstrap-/index.html" class="nav-link text-white" id="nav_object">Home</a></li>
        <li class="nav-item"><a href="/Bootstrap-/about.html" class="nav-link text-white" id="nav_object">About</a></li>
        <li class="nav-item dropdown" id="dropdown">
          <a class="nav-link text-white" href="/Bootstrap-/services.html" role="button"  aria-expanded="false" id="servicesDropdown">
          Services
          </a>
          <ul class="dropdown-menu">
          <!-- <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li> -->
          <!-- <li><hr class="dropdown-divider"></li> -->
          <li><a class="dropdown-item text-capitalize text-white" href="/Bootstrap-/cctv.html">CCTV Services</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/datacenter.html">Datacenter Support</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/digital-signage.html">Digital Signage</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/gen-support.html">General Support</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/net-support.html">Network Support</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/pos.html">POS Services</a></li>
          <li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-/telecom.html">Telecom Services</a></li>
          
          </ul>
        </li>
        <li class="nav-item"><a href="/Bootstrap-/contact.html" class="nav-link text-white" id="nav_object">Contact</a></li>

        <script>
          // Get the Services dropdown link element
          const servicesDropdown = document.getElementById('servicesDropdown');
        
          // Redirect to the services page when the dropdown link is clicked
          servicesDropdown.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default link behavior
            window.location.href = this.getAttribute('href');
          });
        
          // Add the hover effect on desktop devices
          if (window.matchMedia('(min-width: 576px)').matches) {
            // When the mouse enters the dropdown link, show the dropdown menu
            servicesDropdown.addEventListener('mouseenter', function() {
              this.setAttribute('aria-expanded', 'true');
              this.nextElementSibling.classList.add('show');
            });
        
            // When the mouse leaves the dropdown link or the dropdown menu, hide the dropdown menu
            servicesDropdown.addEventListener('mouseleave', function() {
              this.setAttribute('aria-expanded', 'false');
              this.nextElementSibling.classList.remove('show');
            });
          }
        </script>
        <!-- TOGGLE MENU CLOSE -->

       
        </ul>
      </div>
      <!-- TOGGLE MENU CLOSE -->
      </div>
    
    </nav>
    <!-- NAVIGATION BAR CLOSE -->

    <!-- SHOWCASE START -->
    <section>
      <div id="herocarousel" class="carousel slide" data-bs-ride="carousel" >
        
        <div class="carousel-inner">
          <div class="carousel-item active c-item">
          <img src="../src/img/networking-connections-004.jpeg" class="d-block w-100 c-img" alt="...">
          <div class="carousel-caption ">
            
            <h1 class="display-1 fw-bolder text-capitalize">Project___ Name_____</h1>
            <h4 class=" text-uppercase" id="sub-header">Get your unique solution</h4>
            <a href="/Bootstrap-/ticket-form.html" >
              <button type="button"
              class="btn btn-primary px-4 py-2 fs-5 " 
              id="button"
            >
              Submit&nbsp;a&nbsp;Ticket
              

            </button>
            </a>
            
            </div>
          
        
        </div> 
      <!-- class="bg-dark text-white text-center text-sm-start p-5 p-lg-0" -->
      <!-- <div class="container">
        <div class="d-flex align-items-center justify-content-center">
          <div>
            <h1><span class="text-primary">Project___ Name_____</span></h1>
            <p class="lead py-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
              voluptatum, voluptate, quibusdam, quia voluptas quod quos
              exercitationem quae voluptatibus doloribus quidem. Quisquam
              voluptatum, voluptate, quibusdam, quia voluptas quod quos
              exercitationem quae voluptatibus doloribus quidem.
            </p>
            <button type="button" class="btn btn-primary">Get Quote</button>
        </div>
        <img src="./src/img/logo-topnav.png" alt="" class="img-fluid d-none d-lg block"/>
      </div> -->
    </section>
    <!-- SHOWCASE CLOSE -->
  </body>
</html>

html css responsive-design bootstrap-5 web-frontend
1个回答
0
投票

感谢您为 Stack Overflow 提供答案！

请务必回答问题。提供详细信息并分享您的研究！ 但要避免……

寻求帮助、澄清或回应其他答案。 根据意见作出陈述；用参考资料或个人经验来支持它们。 要了解更多信息，请参阅我们关于撰写精彩答案的提示。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.