Question

页面中间有三张卡片：

      ------   ------   ------      
     |      | |      | |      |
     |      | |      | |      |
     |      | |      | |      |
      ------   ------   ------

我在纸牌容器的左侧和右侧设置了15％的边距。

但是，当我调整屏幕尺寸时，纸牌会变小，而装订边会变小，直到等到只有一个装订边。剩下10像素，则应该缩小卡片。

这是我的代码：

.section{
    min-height: 55vh;
    padding: 0 15%;
    display: flex;
    align-items: center;
}
.cards{
    margin: 0 auto;
    width: 90%;
    height: 47vh;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 2rem;
    max-width: 133rem;
}
.card{
    display: grid;
    grid-template-rows: repeat(5,1fr);
    width: 100%;
    height: 100%;
}

<div class="section">

  <div class="cards">

    <div class="card">

    </div>

  </div>

</div>

如何在不使用多个媒体查询的情况下正常运行？谢谢！

Answer 1

您可以在CSS中使用媒体查询来执行此操作。这样的事情可能会起作用：

@media only screen and (max-width: 900px) {
 .section{
  min-height: 55vh;
  padding: 0 5%;
  display: flex;
  align-items: center;
 }
}

这将根据宽度更改css类，基本上，一旦达到900px或更小，它将css更改为新的声明的类。您可能有多个基于宽度的设置。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

我如何才能保证利润率迅速下降？

1 个答案: