制作Web横幅响应

时间：2016-07-11 10:49:48

标签： jquery html css scaling responsive

所以我使用divs和jquery创建了一个Web横幅。我想知道是否有办法让它更具响应性。它使用％并进行缩放，但默认情况下，字母“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;
}

1 个答案:

答案 0 :(得分：1)

您可以将flexbox，视口单元和行组合起来。

.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

相关问题
最新问题