代码之家 › 专栏 › 技术社区 › Sergey Rudenko

如何使这张响应卡更大?

responsive-design css html

Sergey Rudenko · 技术社区 · 6 年前

一张卡片(图片+标题+一些文字)
一个按钮(简单的按钮

现在的要求是确保它在最流行的现代设备(iPhone、iPad、Androids,但如果在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>

在移动设备(宽度小于高度)上-卡太小,我需要将其“展开”更多一点,以便它试图占据大部分空间,但始终垂直和水平居中。

这应该是一个“演练”介绍卡,我不知道如何使它在大多数设备上看起来很好。有什么建议吗?

1 回复 | 直到 6 年前

Sergey Rudenko 6 年前

好的,这是我想要的,它在所有设备上都很有效(使用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>