使网页横幅响应

Question

所以我使用 divs 和 jquery 创建了一个网页横幅。我想知道是否有办法让它更具响应性。它使用 % 并进行缩放，但默认情况下，字母 "HF" 以不同的颜色绘制。因此，如果它缩放单词 HF 并且横幅 height 发生变化。是否有解决方案使其更具可扩展性。现在它只适用于 2736 x 1824。

我认为该代码不会有帮助，但如果您需要，请询问，谢谢！

JSFiddle showing the problem.

我的 JS：

$(function() {
    $('body').hide().fadeIn('slow');
    $('.squareColour').hover(

        function(){
            $(this).animate({'backgroundColor': 'rgb(207,3,114)'},400);
        },
        function(){
            $(this).animate({'backgroundColor': 'rgb(78,76,80)'},400);
        }

    );
    $('.squareColourHF').hover(

        function(){
            $(this).animate({'backgroundColor': 'rgb(202,212,0)'},400);
        },
        function(){
            $(this).animate({'backgroundColor': 'rgb(253,198,0)'},400);
        }

    );
});

我的CSS:

.squareColour{
    width: 2%;
    padding-top: 2%;
    background: rgba(0, 148, 170, 0.53);
    margin-left: 0.001%;
    margin-right: 0.001%;
    margin-top: 0.001%;
    margin-bottom: 0.001%;
    border-radius: 15%;
    display: inline-block;
}
.squareColourHF{
    width: 2%;
    padding-top: 2%;
    background: rgba(207,3,114,0.53);
    margin-left: 0.001%;
    margin-right: 0.001%;
    margin-top: 0.001%;
    margin-bottom: 0.001%;
    border-radius: 15%;
    display: inline-block;
}

Answer 1

您可以结合弹性框、视口单位和行来执行此操作。

.squareColour{
    width: 2vw;
    padding-top: 2vw;
    background: rgba(0, 148, 170, 0.53);
    border-radius: 15%;
}
.squareColourHF{
    width: 2vw;
    padding-top: 2vw;
    background: rgba(207,3,114,0.53);
    border-radius: 15%;
}



.row {
  display: flex;
  justify-content: space-between;
  margin: .2vw;

}

.squareColour {
  width: 2vw;
  padding-top: 2vw;
  background: rgba(0, 148, 170, 0.53);
  border-radius: 15%;
}
.squareColourHF {
  width: 2vw;
  padding-top: 2vw;
  background: rgba(207, 3, 114, 0.53);
  border-radius: 15%;
}
.row {
  display: flex;
  justify-content: space-between;
  margin: .2vw;
}

<div id="bannerTop">
  <div class="row row1">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row2">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row3">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row4">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row5">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row6">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row7">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
</div>

Codepen Demo

使网页横幅响应

Making a Web Banner Responsive

html

css

jquery

scaling

responsive