Question

我的设计包含一个包含在容器div中的多个DIV。每个DIV都定位在像素上，以忠实呈现设计。这些DIV包含文本和图像的混合。我需要整个事情来随着屏幕尺寸的变化来调整大小，并且更普遍地要响应。我对缩放解决方案比基于断点的解决方案更感兴趣。我尝试了多种方法：视口计算，SCSS混合，我尝试实现this solution ...但是由于缺乏成功，我认为我没有正确使用它们。我的代码如下所示： -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使用固定尺寸，但是我不确定如何做到这一点并保持设计的完整性。我开始摆弄最大宽度和最大高度，但是无济于事

Answer 1

最终通过基于断点的解决方案解决了这个问题：

使容器的大小为vw * vh，该大小可在笔记本电脑/台式机上使用，并具有最大宽度和最大高度，以防止不必要的大渲染
然后使用％age值将所有内部DIV定位到正确位置
使用@media创建了一些尺寸，在此我将容器的宽度和高度重置为尊重原始宽度与高度比的值。

使用屏幕尺寸缩放Div，包括子级，文本和图像

1 个答案: