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

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 中左下角右下角只给出百分比，而且您正在使用引导程序 5，这意味着您在移动屏幕上使用它来隐藏类也不需要媒体查询只是为了让您知道在 botstrap 5 中您可以使用 Display 属性隐藏类

.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>