如何在不使用媒体查询的情况下使此叠加层具有响应性？

Question

我试图让这个悬停文本覆盖在几乎所有设备上都能响应，至少在“小、中和大”的常规屏幕上是这样，但我失败了。这是由于绝对位置吗？我尝试了媒体查询，它们只在 40% 的屏幕上工作，而不是所有屏幕。有没有办法避免使用媒体查询？我是编码新手，所以如果我的问题很愚蠢，请原谅我。

.clients {
  position: relative;
  padding: 0px;
  padding-left: 7px;
  padding-right: 7px;
}
.client-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.client-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}
.client-container:hover::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 350ms;
}
.product-desc {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  color: #fff;
  text-align: left;
  padding: 10em 1.39em 0.2em;
  -webkit-transform: translateY(101%);
  transform: translateY(101%);
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  z-index: 1;
  text-transform: uppercase;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  letter-spacing: 1.64px;
}
.client-container:hover .product-desc {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.product-desc2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  color: #fff;
  text-align: right;
  padding: 6.5em 0.389em 0.2em;
  -webkit-transform: translateY(101%);
  transform: translateY(101%);
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  z-index: 1;
  text-transform: capitalize;
  font-size: 21px;
  font-family: 'Inter', sans-serif;
  font-weight:bold;
  letter-spacing: 0.5px;
  margin-left: 6.5px;
}
.client-container:hover .product-desc2 {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.brand-img {
  display: block;
  max-width: 100%;
  height: auto;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 1.6s ease;
  -moz-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  transition: all 1.2s ease;
}
.clients:hover .brand-img {
  cursor: pointer;
  transform: scale(1.6);
  -ms-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -webkit-transform: scale(1.3);
  -o-transform: scale(1.6);
}

@media only screen and (max-device-width : 1440px){
 .product-desc {
      padding: 23em 0.60em 0.2em;
      font-size: 11px;
      font-family: 'Inter', sans-serif;
      font-weight:200;
      margin-left: 4px;
 }
  .product-desc2 {
      padding: 14.5em 0.60em 0.2em;
      font-size: 21px;
      font-family: 'Inter', sans-serif;
      font-weight: bold;
      margin-left: -1px;
 }
 
 }


@media only screen and (max-device-width : 1440px){
 .product-desc {
      padding: 23em 0.60em 0.2em;
      font-size: 11px;
      font-family: 'Inter', sans-serif;
      font-weight:200;
      margin-left: 4px;
 }
  .product-desc2 {
      padding: 14.5em 0.60em 0.2em;
      font-size: 21px;
      font-family: 'Inter', sans-serif;
      font-weight: bold;
      margin-left: -1px;
 }
 
 }
 
 
 @media only screen and (min-device-width: 834px) and (max-device-width: 1112px) {
 

 .product-desc {
      padding: 24em 0.60em 0.2em;
      font-size: 8px;
      font-family: 'Inter', sans-serif;
      font-weight:200;
      margin-left: 1px;
 }
 .product-desc2 {
      padding: 18.1em 0.60em 0.2em;
      font-size: 13px;
      font-family: 'Inter', sans-serif;
      font-weight: bold;
      margin-left: -2px;
 }
 
 }
 
 
 @media only screen and (min-device-width : 768px) and (max-device-width : 1023px) {

  .product-desc {
      padding: 27em 0.60em 0.2em;
      font-size: 7px;
      font-family: 'Inter', sans-serif;
      font-weight:200;
      margin-left: 1px;
 }
 .product-desc2 {
      padding: 17.5em 0.60em 0.2em;
      font-size: 13px;
      font-family: 'Inter', sans-serif;
      font-weight: bold;
      margin-left: -2px;
 }
 
 }
 
 
 @media only screen and (max-width : 600px) {
 
  #work .product-desc {
      display: none;
 }
  #work .product-desc2 {
      padding:15em 0.40em 0.2em;
      font-size: 10px;
      font-family: 'Inter', sans-serif;
      font-weight: bold;
 }
 
 }

<html>
   <head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   </head>
   <body>
      <div class="container text-center">
         <div class="clients col-6 col-md-4 col-lg-3">
            <figure class="client-container">
               <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
               <div class="product-desc">
                  <P>text1</P>
               </div>
               <div class="product-desc2">
                  <p>text2</p>
               </div>
            </figure>
            </a>
         </div>
         <div class="clients col-6 col-md-4 col-lg-3">
            <figure class="client-container">
               <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
               <div class="product-desc">
                  <P>text1</P>
               </div>
               <div class="product-desc2">
                  <p>text2</p>
               </div>
            </figure>
            </a>
         </div>
         <div class="clients col-6 col-md-4 col-lg-3">
            <figure class="client-container">
               <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
               <div class="product-desc">
                  <P>text1</P>
               </div>
               <div class="product-desc2">
                  <p>text2</p>
               </div>
            </figure>
            </a>
         </div>
         <div class="clients col-6 col-md-4 col-lg-3">
            <figure class="client-container">
               <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
               <div class="product-desc">
                  <P>text1</P>
               </div>
               <div class="product-desc2">
                  <p>text2</p>
               </div>
            </figure>
            </a>
         </div>
      </div>
   </body>

Answer 1

不需要填充，因为你的 css 中有左上角和右下角，只需给出百分比，你也在使用 bootstrap 5 这意味着在你的情况下不需要媒体查询在移动屏幕上使用它来隐藏 class 也只是为了让您知道在 botstrap 5 中您可以使用 Display 属性

隐藏 classes

.clients {
  position: relative;
  padding: 0px;
  padding-left: 7px;
  padding-right: 7px;
}
.client-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.client-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}
.client-container:hover::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 350ms;
}
.product-desc {
  position: absolute;
  top: 70%;
  right: 0;
  bottom: 0;
  left: 5%;
  display: flex;
  justify-content: left;
  align-items: center;
  color: #fff;
  text-align: left;
  -webkit-transform: translateY(101%);
  transform: translateY(101%);
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  z-index: 1;
  text-transform: uppercase;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  letter-spacing: 1.64px;
}
.client-container:hover .product-desc {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.product-desc2 {
  position: absolute;
  top: 89%;
  right: 0;
  bottom: -5%;
  left: 3%;
  display: flex;
  justify-content: left;
  align-items: center;
  color: #fff;
  text-align: right;
  -webkit-transform: translateY(101%);
  transform: translateY(101%);
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  z-index: 1;
  text-transform: capitalize;
  font-size: 21px;
  font-family: 'Inter', sans-serif;
  font-weight:bold;
  letter-spacing: 0.5px;
  margin-left: 6.5px;
}
.client-container:hover .product-desc2 {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.brand-img {
  display: block;
  max-width: 100%;
  height: auto;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 1.6s ease;
  -moz-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  transition: all 1.2s ease;
}
.clients:hover .brand-img {
  cursor: pointer;
  transform: scale(1.6);
  -ms-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -webkit-transform: scale(1.3);
  -o-transform: scale(1.6);
}

<html>
   <head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   </head>
   <body>
      <div class="container text-center">
         <div class="clients col-6 col-md-4 col-lg-3">
            <figure class="client-container">
               <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
               <div class="product-desc">
                  <P>Lorem Ipsum is simply dummy text</P>
               </div>
               <div class="product-desc2">
                  <p>Lorem Ipsum</p>
               </div>
            </figure>
            </a>
         </div>
         <div class="clients col-6 col-md-4 col-lg-3">
            <figure class="client-container">
               <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
                            <div class="product-desc">
                  <P>Lorem Ipsum is simply dummy text of the printing </P>
               </div>
               <div class="product-desc2">
                  <p>Lorem Ipsum</p>
               </div>
            </figure>
            </a>
         </div>
            </figure>
            </a>
         </div>
         <div class="clients col-6 col-md-4 col-lg-3">
            <figure class="client-container">
               <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
                              <div class="product-desc">
                  <P>Lorem Ipsum is simply dummy text of the printing </P>
               </div>
               <div class="product-desc2">
                  <p>Lorem Ipsum</p>
               </div>
            </figure>
            </a>
         </div>
            </figure>
            </a>
         </div>
         <div class="clients col-6 col-md-4 col-lg-3">
            <figure class="client-container">
               <img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
                              <div class="product-desc">
                  <P>Lorem Ipsum is simply dummy text of the printing </P>
               </div>
               <div class="product-desc2">
                  <p>Lorem Ipsum</p>
               </div>
            </figure>
            </a>
         </div>
            </figure>
            </a>
         </div>
      </div>
   </body>

如何在不使用媒体查询的情况下使此叠加层具有响应性？

How can I make this overlay responsive without using a media query?

media-queries

responsive

bootstrap-5