javascript - 如何使卡片响应移动和桌面 View ？

Question

这是我的代码，我想让这些卡片响应移动和桌面 View 。我想让这个响应式的。如何让这些卡片在移动 View 中显示并在桌面 View 中显示 2 组像这样

website

怎样才能实现。请大家回答一下这个问题

svg { height:120px;}

<section class="cards">
  <article class="card card--1">
    <div class="card__info-hover">
      <svg class="card__like" viewBox="0 0 24 24">
        <path fill="#000000" d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z" />
    </svg>
      <div class="card__clock-info">
        <svg class="card__clock" viewBox="0 0 24 24"><path d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M19.03,7.39L20.45,5.97C20,5.46 19.55,5 19.04,4.56L17.62,6C16.07,4.74 14.12,4 12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22C17,22 21,17.97 21,13C21,10.88 20.26,8.93 19.03,7.39M11,14H13V8H11M15,1H9V3H15V1Z" />
            </svg><span class="card__time">15 min</span>
      </div>

    </div>
    <div class="card__img"></div>
    <a href="#" class="card_link">
      <div class="card__img--hover"></div>
    </a>
    <div class="card__info">
      <span class="card__category"> Recipe</span>
      <h3 class="card__title">Crisp Spanish tortilla Matzo brei</h3>
      <span class="card__by">by <a href="#" class="card__author" title="author">Celeste Mills</a></span>
    </div>
  </article>


  <article class="card card--2">
    <div class="card__info-hover">
      <svg class="card__like" viewBox="0 0 24 24">
        <path fill="#000000" d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z" />
    </svg>
      <div class="card__clock-info">
        <svg class="card__clock" viewBox="0 0 24 24"><path d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M19.03,7.39L20.45,5.97C20,5.46 19.55,5 19.04,4.56L17.62,6C16.07,4.74 14.12,4 12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22C17,22 21,17.97 21,13C21,10.88 20.26,8.93 19.03,7.39M11,14H13V8H11M15,1H9V3H15V1Z" />
            </svg><span class="card__time">5 min</span>
      </div>

    </div>
    <div class="card__img"></div>
    <a href="#" class="card_link">
      <div class="card__img--hover"></div>
    </a>
    <div class="card__info">
      <span class="card__category"> Travel</span>
      <h3 class="card__title">Discover the sea</h3>
      <span class="card__by">by <a href="#" class="card__author" title="author">John Doe</a></span>
    </div>
  </article>
</section>

Answer 1

您可以使用CSS media queries创建CSS规则来匹配不同的屏幕宽度。 ，并使用规则将适当的宽度值应用于您的文章元素。

如果您已经在使用Bootstrap ，它的Grid布局就是为了快速解决这类问题而设计的。但您可以简单地使用媒体查询。