Question

我想知道我如何调整css加载器的大小，例如为移动用户调整大小，因为我注意到加载器不会为移动用户调整大小，无论页面大小如何，我都要保持相同的大小，我想要它像文本和东西一样调整自己的大小。如果你感到困惑，这是一个css加载器的例子：

＆＃13;

#floatBarsG{
	position:relative;
	width:234px;
	height:28px;
	margin:auto;
	margin-top: 13%;
}
.floatBarsG{
	position:absolute;
	top:0;
	background-color:rgb(0,0,0);
	width:28px;
	height:28px;
	animation-name:bounce_floatBarsG;
	animation-duration:1.5s;
	animation-direction:normal;
	transform:scale(.3);
}

#floatBarsG_1{
	left:0;
	animation-delay:0.6s;
}
#floatBarsG_2{
	left:29px;
	animation-delay:0.75s;
}
#floatBarsG_3{
	left:58px;
	animation-delay:0.9s;
}
#floatBarsG_4{
	left:88px;
	animation-delay:1.05s;
}
#floatBarsG_5{
	left:117px;
	animation-delay:1.2s;
}
#floatBarsG_6{
	left:146px;
	animation-delay:1.35s;
}
#floatBarsG_7{
	left:175px;
	animation-delay:1.5s;
}
#floatBarsG_8{
	left:205px;
	animation-delay:1.64s;
}
@keyframes bounce_floatBarsG{
	0%{
		transform:scale(1);
		background-color:rgb(0,0,0);
	}

	100%{
		transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}

＆＃13;

<div id="floatBarsG">
  <div id="floatBarsG_1" class="floatBarsG"></div>
  <div id="floatBarsG_2" class="floatBarsG"></div>
  <div id="floatBarsG_3" class="floatBarsG"></div>
  <div id="floatBarsG_4" class="floatBarsG"></div>
  <div id="floatBarsG_5" class="floatBarsG"></div>
  <div id="floatBarsG_6" class="floatBarsG"></div>
  <div id="floatBarsG_7" class="floatBarsG"></div>
  <div id="floatBarsG_8" class="floatBarsG"></div>
</div>

＆＃13;

Answer 1

您可以使用：

transform: scale(0.5);

在你的：

<div id="floatBarsG">

元素如下所示

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

    transform: scale(0.5);
}

与媒体查询结合使用，以获得所需的宽度/设备

有关媒体查询的文章：

https://wiki.selfhtml.org/wiki/CSS/Media_Queries http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

JSFIDDLE示例：http://jsfiddle.net/hdznz09a/3/（尝试调整浏览器窗口大小）

Answer 2

如评论所述：

使用动态尺寸，例如vh或vw
float:left;您的 minitinysquares 和
不要absolute和left值
请勿使用# ID，使用类（代码可重用性）

＆＃13;

#floatBarsG{
  position:absolute;
  left:50%; top: 50%;
  transform: translate(-50%, -50%);
}
.floatBarsG{
  float:left;
  background-color:rgb(0,0,0);
  width:3vh;                        /* Use responsive units */
  height:3vh;
  min-width: 20px;                  /* prevent making them too small */
  min-height: 20px;
  animation:bounce_floatBarsG 1.5s infinite;
  transform:scale(.3);
}
.floatBarsG._1{animation-delay:0.6s;}
.floatBarsG._2{animation-delay:0.75s;}
.floatBarsG._3{animation-delay:0.9s;}
.floatBarsG._4{animation-delay:1.05s;}
.floatBarsG._5{animation-delay:1.2s;}
.floatBarsG._6{animation-delay:1.35s;}
.floatBarsG._7{animation-delay:1.5s;}
.floatBarsG._8{animation-delay:1.64s;}

@keyframes bounce_floatBarsG{
  from{
    transform:scale(1);
    background-color:rgb(0,0,0);
  }
  to{
    transform:scale(.3);
    background-color:rgb(255,255,255);
  }
}

＆＃13;

<div id="floatBarsG">
  <div class="floatBarsG _1"></div>
  <div class="floatBarsG _2"></div>
  <div class="floatBarsG _3"></div>
  <div class="floatBarsG _4"></div>
  <div class="floatBarsG _5"></div>
  <div class="floatBarsG _6"></div>
  <div class="floatBarsG _7"></div>
  <div class="floatBarsG _8"></div>
</div>

＆＃13;

如何调整css加载器的大小？

2 个答案: