没有引导的 CSS 响应卡

【问题标题】：CSS responsive card without bootstrap没有引导的 CSS 响应卡
【发布时间】：2019-02-04 00:00:16
【问题描述】：

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

【问题讨论】：

请通过google.co.in/amp/s/themeshaper.com/2014/08/19/… ...它可能会帮助你
好的。那么，您面临的问题是什么？ Learn how to ask a proper question on Stack Overflow
表明缺乏对问题/要求的研究。
然后编写自己的媒体查询和类，请先研究一下
这不是问题。这是要求其他人做你的工作。

标签： html css responsive-design responsive

【解决方案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.：不要关注方块的高度，这只是举例说明如何解决你的屏幕尺寸问题。

【讨论】：