javascript - 响应式文本问题

Question

我有以下代码：

body{
    width:100%;
    font-family:sans-serif;
    background: transparent;  
}
.testimonials{
    margin:0;
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(350px, 1fr));
    grid-gap:20px;
}
.testimonials .card{
    position:relative;
    width:350px;
    margin:0 auto;
    background:#333;
    padding:20px;
    box-sizing: border-box;
    text-align:center;
    box-shadow: 10px 8px 20px rgba(0,0,0,.5);
    overflow: hidden;
}
.testimonials .card .layer{
    position: absolute;
    top: calc(100% - 3px);
    width:100%;
    height:100%;
    left:0;
    background:linear-gradient(#034e70, #390375);
    z-index:1;
    transition:0.5s;
}
.testimonials .card:hover .layer{
    top:0;
}
.testimonials .card .content{
    position:relative;
    z-index:2;
}
.testimonials .card .content p{
    font-size:18px;
    line-height:24px;
    color:#FFF;
}
@media all and (max-width: 500px) {
.testimonials .card .content p{
width: 100%;
}
}

.testimonials .card .content .image{
    width:100px;
    height:100px;
    margin: 0 auto;
    border-radius:50%;
    overflow:hidden;
  margin-bottom: 16px;
    box-shadow: 0 10px 20px rgba{0,0,0, .2};
}
.testimonials .card .content .details h2{
    font-size:15px;
    color:#fff;
}
.testimonials .card .content .details h2 span{
    color:#03a9f4;
    font-size:12px;
    transition:0.5s;
}
.testimonials .card:hover .content .details h2 span{
    color:#fff;
}

<section id="References">
      <div class="section-title">
        <h2>References</h2>
        </div>
    <div class="testimonials">
    <!-- CARD 1 START-->
    <div class="card">
      <div class="layer"></div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
        <div class="image">
          <img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
        </div>
        <div class="details">
          <h2>
            Sample Text <br>
            <span>Sample Text Goes Here Too</span>            
          </h2>
        </div>
      </div>
    </div>
    <!-- CARD 1 end-->
    
    <!-- CARD 2 START-->
    <div class="card">
      <div class="layer"></div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
        <div class="image">
          <img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
        </div>
        <div class="details">
          <h2>
            Sample Text <br>
            <span>Sample Text Goes Here Too</span>           
          </h2>
        </div>
      </div>
    </div>
    <!-- CARD 2 end-->
    <!-- CARD 3 START-->
    <div class="card">
      <div class="layer"></div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
        <div class="image">
          <img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
        </div>
        <div class="details">
          <h2>
           Sample Text <br>
            <span>Sample Text Goes Here Too</span>            
          </h2>
        </div>
      </div>
    </div>
    <!-- CARD 3 end-->
  </div>
</section>

我在网站中嵌入了上述代码，因此当我在较小的屏幕上查看网站时，我得到以下输出：

白色文本、图像和蓝色文本没有响应。然而，卡是。它只是这三件事，我尝试添加媒体查询以使其响应，但由于某种原因它不起作用，并且输出与上面完全相同。

预期产出

当我检查它并以 414 宽度查看它时，我得到了上述预期的输出，这正是我想要的。但是，在 414 宽度以下，我得到的输出如第一张图片所示。我将如何解决这个问题？有什么建议么？

标签： javascripthtmlcssresponsive-designresponsive

Answer 1

这是因为你为你的元素设置了一个固定width的。350px当您使窗口宽度小于~370px 时，固定宽度会阻止元素变得更小。尝试使用相对大小，例如%。