Как сделать эту адаптивную карту большей? - PullRequest
Новая
       4

Как сделать эту адаптивную карту большей?

0 голосов
/ 08 сентября 2018

Мне нужно создать очень простой дизайн:

  • карточка (изображение + заголовок + текст)
  • кнопка (простая кнопка, которая фиксируется внизу любого экрана)

Теперь необходимо убедиться, что он отлично воспроизводится на большинстве популярных современных устройств (iPhone, iPad, Android, но также и при открытии на ПК)

Это то, что я сделал до сих пор: 

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 Ответ

0 голосов
/ 08 сентября 2018

ОК, это то, что я хотел, и он отлично работал на всех устройствах (используя 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>
...