Шкала Div с размером экрана, включая детей, текст и изображения - PullRequest
Новая
       40

Шкала Div с размером экрана, включая детей, текст и изображения

0 голосов
/ 04 октября 2018

У меня есть дизайн, который включает в себя несколько DIV, содержащихся в контейнере div.Каждый DIV позиционируется в пиксель для точной визуализации дизайна.Эти DIV содержат смесь текста и изображений.Мне нужно было бы все это, чтобы изменить размер с изменениями размера экрана и в целом быть отзывчивым.Меня больше интересует решение для масштабирования, чем решение на основе точки останова.Я пробовал несколько вещей: вычисления в области просмотра, микширование SCSS, я пытался реализовать это решение ... но, основываясь на моем отсутствии успеха, я думаю, что я не использую их правильно.Мой код выглядит так: - CSS 

.spacer30 {
  margin-top:30px;
}
.cardFieldColor {
    position: absolute;
    height: 220px;
    width: 316px;
    top: 0px;
    left:0px;
    border-radius: 15px 0px 0px 0px;
    z-index= 1;
}

.fieldIconImg {
  width: 71px;
  height: 66px;
}

.fieldPictureImg {
  width: 284px;
  height: 195px;
}

.fieldIcon {
    position: absolute;
    top: 0px;
    left: 33px;
    z-index = 10;
}

.fieldPicture {
    position: absolute;
    height: 195px;
    width: 284px;
    top: 25px;
    left: 316px;
    border-radius: 0px 15px 0px 0px;
    z-index = 5;
}

.totalRaised {
    position: absolute;
    height: 134px;
    width: 600px;
    top: 220px;
    left: 0px;
    background-color: #383838;
    z-index = 5;
}

.stats-1 {
    position: absolute;
    height: 208px;
    width: 600px;
    top: 354px;
    left: 0px;
    background-color: #dcddde;
    z-index = 5;
}

.stats-2 {
    position: absolute;
    height: 71px;
    width: 600px;
    top: 562px;
    left: 0px;
    background-color: #ebebeb;
    border-radius: 0px 0px 15px 15px;
    z-index = 5;
}

.fieldName {
    position: absolute;
    height: 22px;
    width: 290px;
    top: 75px;
    left: 33px;
    color: #ffffff;
    font-family: 'AkzidenzGroteskBE';
    font-size: 2vw;
    font-weight: 700;
    line-height: 21px;
    text-align: left;
    text-transform: uppercase;
}

.projectName {
    position: absolute;
    height: 71px;
    width: 290px;
    top: 114px;
    left: 33px;
    color: #1b1b1b;
    font-family: 'AkzidenzGroteskBE';
    font-size: 3vw;
    font-weight: 700;
    line-height: 26.346px;
    text-align: left;
    text-transform: uppercase;
}

и HTML: 

<div class="row">
    <div class="col-sm-12">
        <div class="cardContainer">
            <div class="cardFieldColor" style="background-color: blue">
                <div class="fieldName">
                    Technology
                </div>
                <div class="projectName">
                    Create scaling Divs and content
                </div>
            </div>

            <div class="fieldIcon">
                <img class="fieldIconImg" src="https://cdn1.iconfinder.com/data/icons/xcase-icons/48/icon_ui-23-512.png">
            </div>
            <div class="fieldPicture">
                <img class="fieldPictureImg" src="https://www.arhamsoft.com/wp-content/uploads/2017/03/blog-13.jpg">
            </div>

            <div class="stats-1">
              Stats #1
            </div>
            <div class="stats-2">
              Stats #2
            </div>
        </div>
    </div>
</div>
<div class="spacer30"></div>
    <div class="row">
    <div class="col-sm-12">
        <div class="cardContainer">
            <div class="cardFieldColor" style="background-color: red">
                <div class="fieldName">
                    Technology
                </div>
                <div class="projectName">
                    Create scaling Divs and content
                </div>
            </div>
            <div class="fieldIcon">
                <img class="fieldIconImg" src="https://cdn1.iconfinder.com/data/icons/xcase-icons/48/icon_ui-23-512.png">
            </div>
            <div class="fieldPicture">
                <img class="fieldPictureImg" src="https://www.arhamsoft.com/wp-content/uploads/2017/03/blog-13.jpg">
            </div>

            <div class="stats-1">
               Stats #1
            </div>
            <div class="stats-2">
              Stats #2
            </div>
        </div>
    </div>
</div>
<div class="spacer30"></div>

Вот Fiddle с основой дизайна.Этот дизайн может повторяться на странице несколько раз.

Я также понимаю, что мне, вероятно, не следует использовать фиксированные размеры для изображений или даже внутренних DIV, но я не уверен, как это сделать и сохранить целостностьдизайн.Я начал возиться с max-width и max-height, но безрезультатно

1 Ответ

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

Закончилось решение этой проблемы с помощью решения на основе точки останова:

  • Сделал контейнер размером vw * vh, который работает на ноутбуке / настольном компьютере с максимальной шириной и максимальной высотой, чтобы избежать ненужныхбольшой рендеринг
  • Затем все внутренние DIV, расположенные с использованием значений% age, в правильное положение
  • Используя @media, создали несколько размеров, где я сбрасываю ширину и высоту контейнера так, чтобы они соответствовалиОтношение ширины к высоте оригинала.
...