Jquery 使网页横幅具有响应性

因此，我使用

divs

和jquery创建了一个web横幅。我想知道是否有办法让它更具响应性。它使用%并进行缩放，但默认情况下，字母“HF”以不同的颜色绘制。因此，如果它缩放单词HF和横幅

高度

变化。是否有一种解决方案使其更具可扩展性。目前，它只适用于2736 x 1824

我不认为代码会有帮助，但如果你想要它，请询问， 谢谢

我的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;
}

---

可以使用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;

}

.squareColor{
宽度：2vw；
垫面：2vw；
背景：rgba（0，148，170，0.53）；
边界半径：15%；
}
.平方英尺{
宽度：2vw；
垫面：2vw；
背景：rgba（207,3114,0.53）；
边界半径：15%；
}
.行{
显示器：flex；
证明内容：之间的空间；
利润率：2vw；
}

你能提供一个JSFIDLE吗？我不知道你在说什么，你有什么问题。你应该考虑用MCVE改写你的问题，我的代码会有帮助。你走吧：它在2736×1824运行时会变成字母HF。谢谢，我不能参加投票，因为我没有15因果报应，但是非常感谢。