如何调整css加载程序的大小？

我想知道如何调整css加载器的大小，比如为移动用户调整它的大小，因为我注意到加载器不会为移动用户调整大小，它们只是保持相同的大小，不管页面大小如何，我希望它像文本和其他东西一样调整自身大小。下面是一个css加载程序示例，如果您感到困惑：

#floatBarsG{
位置：相对位置；
宽度：234px；
高度：28px；
保证金：自动；
利润率最高：13%；
}
.浮子酒吧{
位置：绝对位置；
排名：0；
背景色：rgb（0,0,0）；
宽度：28px；
高度：28px；
动画名称：bounce_floatBarsG；
动画持续时间：1.5s；
动画方向：正常；
变换：缩放（.3）；
}
#浮球1{
左：0；
动画延迟：0.6s；
}
#浮子棒2{
左：29px；
动画延迟：0.75s；
}
#浮球3{
左：58px；
动画延迟：0.9秒；
}
#浮球4{
左：88px；
动画延迟：1.05秒；
}
#浮球球5{
左：117px；
动画延迟：1.2s；
}
#浮子棒SG_6{
左：146px；
动画延迟：1.35秒；
}
#浮子酒吧7{
左：175px；
动画延迟：1.5s；
}
#浮子酒吧8{
左：205px；
动画延迟：1.64s；
}
@关键帧反弹{
0%{
变换：比例（1）；
背景色：rgb（0,0,0）；
}
100%{
变换：缩放（.3）；
背景色：rgb（255255）；
}
}

您可以使用：

transform: scale(0.5);

在您的网站上：

<div id="floatBarsG">

结合所需宽度/设备的媒体查询

关于媒体查询的文章：

JSFIDLE示例：（尝试调整浏览器窗口的大小）

如评论中所述：

• 使用动态尺寸如

  vh

  或

  vw

• float：左您的迷你正方形和

• 不要更改为

  绝对值

  和

  左

  值
• 不要使用

  #

  ID，而是使用类（代码可重用性）

#floatBarsG{
位置：绝对位置；
左侧：50%；顶部：50%；
转换：翻译（-50%，-50%）；
}
.浮子酒吧{
浮动：左；
背景色：rgb（0,0,0）；
宽度：3vh；/*使用响应单元*/
高度：3vh；
最小宽度：20px；/*防止使其过小*/
最小高度：20px；
动画：bounce_floatBarsG 1.5s无限；
变换：缩放（.3）；
}
.floatBarsG._1{动画延迟：0.6s；}
.floatBarsG._2{动画延迟：0.75s；}
.floatBarsG._3{动画延迟：0.9s；}
.floatBarsG._4{动画延迟：1.05s；}
.floatBarsG._5{动画延迟：1.2s；}
.floatBarsG._6{动画延迟：1.35s；}
.floatBarsG._7{动画延迟：1.5s；}
.floatBarsG._8{动画延迟：1.64s；}
@关键帧反弹{
从{
变换：比例（1）；
背景色：rgb（0,0,0）；
}
到{
变换：缩放（.3）；
背景色：rgb（255255）；
}
}

请定义什么是“css加载器”。使用动态尺寸，如

宽度：3vh

，或

高度：3vh

（所以使用

%

、

vw

、

vh

或任何其他响应单元）float离开你的迷你正方形，不要使用

left

@CharlesMcKelvey他们就像是用css制作的加载图标，明白了。@RokoC.Buljan Kk我会尝试一下，谢谢你的欢迎（：-我为你添加了一个JSFIDLE，也许会有所帮助！

#floatBarsG{
    position:absolute;
    width: 33%;
    height:28px;
    margin-left: -117px;
    left: 50%;
    margin-top: 13%;

    transform: scale(0.5);
}