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

时间:2020-09-13 17:43:37

标签: html css padding margin

页面中间有三张卡片:

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

我在纸牌容器的左侧和右侧设置了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>

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

1 个答案:

答案 0 :(得分:0)

您可以在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