Как сделать элемент div (в ближайшее время часы) Resposive? - PullRequest
Новая
       33

Как сделать элемент div (в ближайшее время часы) Resposive?

0 голосов
/ 09 декабря 2018

Я хочу создать отзывчивый в ближайшее время одну страницу веб-сайт

, и я нашел, как сделать логотип / изображение адаптивным с помощью этого курса 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 Ответ

0 голосов
/ 09 декабря 2018

То, что вы ищете, это Медиа-запросы .Вы можете изменить размер элементов <div> в соответствии с размером окна браузера.

Примерно так: 

@media only screen and (max-width: 400px) {
  .cssload-wrapper{
    width: 300px;
  }
}
...