Question

我需要创建一个非常简单的设计：

一张卡片（图片+标题+一些文字）
一个按钮（简单的按钮固定在任何屏幕的底部）

现在的要求是确保它在大多数流行的现代设备（iPhone，iPad，Android和在PC上打开的设备）上都能呈现出色的效果

这是我到目前为止所做的：

div.cardContainer {
  position:absolute;
  max-width:60%;
  max-height:60%;
  top:45%;
  left:55%;
  overflow:visible;
}
div.card {
  width: 100%;
  height: 100%;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  position:relative;
  max-width:80%;
  max-height:100%;
  margin-top:-50%;
  margin-left:-50%;
}
.card-img {
  position:relative;
  max-width:100%;
  max-height:100%;
}
.card-title {
  padding-left: 16px;
}
.card-text {
  padding-left: 16px;
}
.buttonContainer {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
}

<div class="cardContainer">
  <div class="card">
    <img class="card-img" src="http://placehold.it/560x560">		
    <div class="card-body">
      <h4 class="card-title">Title</h4>
      <p class="card-text">Nullam id dolor id nibh ultricies vehicula utasdasdasdasdas dasdas asdasd asdasd asd as id elit.</p>
    </div>
  </div>
</div>
<button class="buttonContainer" type="button">Button</button>

虽然可以，但是我无法解决以下问题：

在移动设备（宽度小于高度）上-卡太小，我需要将其“散布”得更多些，以便它试图占据大部分空间，但始终始终居中垂直和水平。

这应该是一张“演练”简介卡，我不知道如何使它在大多数设备上看起来都不错。有什么建议吗？

Answer 1

好的，这就是我想要的，它在所有设备上都很好用（使用devtools）。我没有针对水平（16：9）版式进行优化。尽管对于所有肖像布局来说，这看起来都不错。

div.cardContainer {
        position:absolute;
        top: 5%;
        left: 5%;
        right: 5%;
        bottom: 10%;
        overflow:hidden;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
      }
      div.card {
        position: relative;
        height: 90%;
        width: 80%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        margin: auto;
      }
      .card-img {
        padding-top: 16px;
        max-width:100%;
        max-height:560px;
      }
      .card-body {
        position: relative;
      }
      .card-title {
        padding-left: 16px;
      }
      .card-text {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
      }
      .introNextButton {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 40px;
      }

<div class="cardContainer">
        <div class="card">
          <img class="card-img" src="http://placehold.it/560x560">		
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Nullam id dolor id nibh ultricies vehicula utasdasdasdasdas dasdas asdasd asdasd asd as id elit.</p>
          </div>
        </div>
      </div>
    <button class="introNextButton" type="button">Button</button>

如何使此响应式卡片更大？

1 个答案: