CSS 没有 bootstrap 的响应卡

Question

我想在 HTML 和 CSS 中创建一个响应式卡片，而不像这样使用 bootstrap：

Answer 1

最好这样使用flex:

* {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100vh;
  flex-wrap: no-wrap;
}

.container div {
  width: 50%;
  height: 200px;
}

.picture {
  background: #4451c2;
}

.text {
  background: #f451c2;
}

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .container div {
    width: 100%;
  }
}

<div class="container">
  <div class="picture">picture</div>
  <div class="text">Some text is here</div>
</div>

使用 @media 规则，我们将 width 更改为 100%，将 flex-order 更改为 column。

P.S.: 不要注意块的高度，这只是一个例子如何解决你的屏幕尺寸问题。

CSS 没有 bootstrap 的响应卡

CSS responsive card without bootstrap

html

css

responsive-design

responsive