如何使一个元素div（即将到来的时钟）resposive？-Java 学习之路

我想创建一个响应即将推出的一页website

我发现如何使用此课程使徽标/图像响应w3schools

但我无法弄清楚如何让时钟即将到来元素/ div特别为mobile

因为你看到时钟比移动版的徽标更大 . 那么我怎样才能让即将到来的时钟在移动版中更小？

.responsive {
    max-width: 100%;
    height: auto;
}

.logo{
  width:60%;
  margin: auto;
}



#cssload-wrapper {
	position: relative;
	overflow: hidden;
  margin-top: 20px;
}

.cssload-loader {
	width: 225px;
	height: 225px;
	border: 2px rgb(245,131,32) solid;
	position: relative;
	/* left: 50%;
	top: 65%; */
	margin: 0;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
}

.cssload-loader .cssload-loading {
	font-size: 15px;
	position: absolute;
	width: 100%;
	text-align: center;
	line-height: 21px;
	font-family: 'Century Gothic', sans-serif;
	font-style: italic;
	left: 0;
	top: 50%;
	margin-top: 30px;
	color: rgb(0,101,179);
	font-weight: bold;
	text-transform: uppercase;
		-o-text-transform: uppercase;
		-ms-text-transform: uppercase;
		-webkit-text-transform: uppercase;
		-moz-text-transform: uppercase;
}

.cssload-loader-circle-1 {
	width: 207px;
	height: 207px;
	left: 8px;
	top: 8px;
	border: 2px rgb(0,101,179) solid;
	position: absolute;
	border-right-color: transparent;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	animation: spin 3.45s linear infinite;
		-o-animation: spin 3.45s linear infinite;
		-ms-animation: spin 3.45s linear infinite;
		-webkit-animation: spin 3.45s linear infinite;
		-moz-animation: spin 3.45s linear infinite;
}

.cssload-loader-circle-2 {
	width: 189px;
	height: 189px;
	left: 8px;
	top: 8px;
	border: 2px transparent solid;
	position: absolute;
	border-right-color: rgb(245,131,32);
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	animation: spin 5.75s linear infinite;
		-o-animation: spin 5.75s linear infinite;
		-ms-animation: spin 5.75s linear infinite;
		-webkit-animation: spin 5.75s linear infinite;
		-moz-animation: spin 5.75s linear infinite;
}

.cssload-loader .cssload-line {
	width: 15px;
	height: 3px;
	background: rgb(0,101,179);
	position: absolute;
}

.cssload-loader .cssload-line:nth-child(1) {
	left: 24px;
	top: 50%;
	margin-top: -2px;
}

.cssload-loader .cssload-line:nth-child(2) {
	transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
	left: 50px;
	top: 50px;
}

.cssload-loader .cssload-line:nth-child(3) {
	top: 24px;
	left: 50%;
	width: 3px;
	height: 15px;
}

.cssload-loader .cssload-line:nth-child(4) {
	transform: rotate(135deg);
		-o-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
	right: 50px;
	top: 50px;
}

.cssload-loader .cssload-line:nth-child(5) {
	right: 24px;
	top: 50%;
	margin-top: -2px;
}

.cssload-loader .cssload-line:nth-child(6) {
	transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
	right: 50px;
	bottom: 50px;
	background: rgb(245,131,32);
}

.cssload-loader .cssload-subline {
	position: absolute;
	width: 5px;
	height: 3px;
	background: rgb(0,101,179);
}

.cssload-loader .cssload-subline:nth-child(7) {
	transform: rotate(22.5deg);
		-o-transform: rotate(22.5deg);
		-ms-transform: rotate(22.5deg);
		-webkit-transform: rotate(22.5deg);
		-moz-transform: rotate(22.5deg);
	left: 32px;
	top: 75px;
}

.cssload-loader .cssload-subline:nth-child(8) {
	transform: rotate(67.5deg);
		-o-transform: rotate(67.5deg);
		-ms-transform: rotate(67.5deg);
		-webkit-transform: rotate(67.5deg);
		-moz-transform: rotate(67.5deg);
	left: 75px;
	top: 32px;
}

.cssload-loader .cssload-subline:nth-child(9) {
	transform: rotate(112.5deg);
		-o-transform: rotate(112.5deg);
		-ms-transform: rotate(112.5deg);
		-webkit-transform: rotate(112.5deg);
		-moz-transform: rotate(112.5deg);
	right: 75px;
	top: 32px;
}

.cssload-loader .cssload-subline:nth-child(10) {
	transform: rotate(157.5deg);
		-o-transform: rotate(157.5deg);
		-ms-transform: rotate(157.5deg);
		-webkit-transform: rotate(157.5deg);
		-moz-transform: rotate(157.5deg);
	right: 32px;
	top: 75px;
}

.cssload-loader .cssload-subline:nth-child(11) {
	transform: rotate(22.5deg);
		-o-transform: rotate(22.5deg);
		-ms-transform: rotate(22.5deg);
		-webkit-transform: rotate(22.5deg);
		-moz-transform: rotate(22.5deg);
	right: 30px;
	bottom: 74px;
	background: rgb(0,101,179);
}

.cssload-loader .cssload-needle {
	width: 21px;
	height: 21px;
	border: 2px rgb(0,101,179) solid;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -12px 0 0 -12px;
	z-index: 1;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	animation: pegIt 3.45s infinite ease-in-out;
		-o-animation: pegIt 3.45s infinite ease-in-out;
		-ms-animation: pegIt 3.45s infinite ease-in-out;
		-webkit-animation: pegIt 3.45s infinite ease-in-out;
		-moz-animation: pegIt 3.45s infinite ease-in-out;
}

.cssload-loader .cssload-needle:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5.5px 75px 5.5px 0;
	border-color: transparent rgb(245,131,32) transparent transparent;
	position: absolute;
	right: 50%;
	top: 50%;
	margin: -5.5px 0 0 0;
	border-radius: 0 50% 50% 0;
		-o-border-radius: 0 50% 50% 0;
		-ms-border-radius: 0 50% 50% 0;
		-webkit-border-radius: 0 50% 50% 0;
		-moz-border-radius: 0 50% 50% 0;
}





@keyframes pegIt {
	0% {
		transform: rotate(0deg);
	}
	16% {
		transform: rotate(75deg);
	}
	25% {
		transform: rotate(55deg);
	}
	30% {
		transform: rotate(90deg);
	}
	36% {
		transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		transform: rotate(227deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@-o-keyframes pegIt {
	0% {
		-o-transform: rotate(0deg);
	}
	16% {
		-o-transform: rotate(75deg);
	}
	25% {
		-o-transform: rotate(55deg);
	}
	30% {
		-o-transform: rotate(90deg);
	}
	36% {
		-o-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-o-transform: rotate(227deg);
	}
	100% {
		-o-transform: rotate(0deg);
	}
}

@-ms-keyframes pegIt {
	0% {
		-ms-transform: rotate(0deg);
	}
	16% {
		-ms-transform: rotate(75deg);
	}
	25% {
		-ms-transform: rotate(55deg);
	}
	30% {
		-ms-transform: rotate(90deg);
	}
	36% {
		-ms-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-ms-transform: rotate(227deg);
	}
	100% {
		-ms-transform: rotate(0deg);
	}
}

@-webkit-keyframes pegIt {
	0% {
		-webkit-transform: rotate(0deg);
	}
	16% {
		-webkit-transform: rotate(75deg);
	}
	25% {
		-webkit-transform: rotate(55deg);
	}
	30% {
		-webkit-transform: rotate(90deg);
	}
	36% {
		-webkit-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-webkit-transform: rotate(227deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
	}
}

@-moz-keyframes pegIt {
	0% {
		-moz-transform: rotate(0deg);
	}
	16% {
		-moz-transform: rotate(75deg);
	}
	25% {
		-moz-transform: rotate(55deg);
	}
	30% {
		-moz-transform: rotate(90deg);
	}
	36% {
		-moz-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-moz-transform: rotate(227deg);
	}
	100% {
		-moz-transform: rotate(0deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-o-keyframes spin {
	0% {
		-o-transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes spin {
	0% {
		-ms-transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(360deg);
	}
}

<div class="logo">
<img class='responsive' src='https://2.bp.blogspot.com/-VTCVnBuSn3I/XAxJCeM2HeI/AAAAAAAAAuw/vddRM_bPEgQwkXeFbQ5Uwgd5wlRDwpWPQCLcBGAs/s1600/600.PNG'/>
   </div>

<div id="cssload-wrapper" align="center">
	<div class="cssload-loader">
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-loader-circle-1"><div class="cssload-loader-circle-2"></div></div>
		<div class="cssload-needle"></div>
		<div class="cssload-loading">COMING SOON</div>
	</div>
</div>

1 回答

1
你在找什么是Media Queries . 您可以根据浏览器窗口的大小调整 <div> 元素的大小 .

像这样：
```
@media only screen and (max-width: 400px) {
  .cssload-wrapper{
    width: 300px;
  }
}
```
回复于 2024-05-03T18:33:47+08:00

如何使一个元素div（即将到来的时钟）resposive？

1 回答

相关问题