@suprascapularis69

Почему div-ы c позиционированием absolute-relative не реагируют на изменение масштаба браузера?

Доброго времени суток.

Пишу свой первый код для макета. Суть в отработке базовых тегов и свойств для работы с текстом и картинками, то есть фактически в данный момент учусь читать макет и перерисовывать его как картинку, но всё же интересно было его адаптировать под все разрешения, из-за чего всем дивам, где есть фоновое изображение задал позиционирование absolute-relative и все px заменил на vw.

Всё казалось бы отлично работает на всех разрешениях, но при прокрутке масштаба самого браузера эти дивы размеров не меняют.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<title>Dance</title>
</head>
<body>
	<div class="content-top-box">
		<div class="content-top">
			<div class="content-top__big">Move with impact</div>
			<div class="content-top__small">on a monthly, full-service ebike subscription.</div>
		</div>
	</div>
	<div class="content-image">
		<div class="content-image__big">Built to move</div>
		<div class="content-image__small">Engineered in Germany, loved around the world.</div>
		<img src="img/image.jpg" alt="">
	</div>
	<div class="content-bottom-box">
		<div class="content-bottom">
			<div class="content-bottom__big">Join the <span>movement</span></div>
			<div class="content-bottom__small">When you join the Dance movement, you're not just getting an ebike that stands out from the crowd. You're joining a forward-thinking community that truly cares for this planet we call home and wants to make choices for the better.</div>
			<div class="content-bottom-info">
				<ul class="content-bottom-info-list">
					<li>Monthly fee</li>
					<li>Cancel anytime</li>
					<li>Theft protection</li>
					<li>Repairs included</li>
				</ul>
			</div>
			<a target="_blank" href="http://google.com" class="content-bottom-info__link">
					Request an invite
			</a>
		</div>
	</div>
</body>
</html>


@font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Regular.ttf") format("truetype");
font-style: normal; 
font-weight: normal;
}

* {
	padding: 0;
	margin: 0;
	border: 0;
}
*,*:before,*:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body {
	font-family: "Roboto";
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust:  100%;
	-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family: inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding: 0;border: 0;}
a, a:visited{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size: inherit;font-weight: 400;}
/*---------------------*/

.content-top-box {
	width: 100%;
	position: relative;
	background: url('../img/bg1.png') 0 0/100% 100% no-repeat;
	padding-top: 55.56%;
	margin: 0 0 7.29vw 0;
}
.content-top {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: right;
	color: #FBF7F3;
	padding: 0 3.13vw 0 0;
}
.content-top__big {
	padding: 4.93vw 0 0 0;
	margin: 0 0 1.32vw 0;
	font-size: 6.46vw;
	line-height: 7.78vw;
	letter-spacing: 0.37vw;
}
.content-top__small {
	font-size: 2.01vw;
	line-height: 1.94vw;
}


.content-image {
	max-width: 1152px;
	margin: 0 auto;
	text-align: center;
}
.content-image__big {
	font-size: 79px;
	line-height: 81px;
	letter-spacing: 2px;
	color: #49464F;
	margin: 0 0 10px 0;
}
.content-image__small {
	font-size: 20px;
	line-height: 23px;
	color: #8172A2;
	margin: 0 0 12px 0;
}
.content-image img {
	max-width: 100%;
}

.content-bottom-box {
	width: 100%;
	position: relative;
	background: url('../img/bg2.png') left/25vw 37.5vw no-repeat, #F7F0EA url('../img/bg3.png') right/25vw 37.5vw no-repeat;
	padding-top: 59.86%;
}
.content-bottom {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0px auto;
	text-align: center;
	max-width: 35.42vw;
}
.content-bottom__big {
	padding: 4.31vw 0 0 0;
	margin: 0 0 4.17vw 0;
	font-size: 5.69vw;
	line-height: 5.63vw;
	letter-spacing: 0.21vw;
	color: #49464F;
}
.content-bottom__big span {
	padding: 0 0 0 1.39vw;
}
.content-bottom__small {
	margin: 0 0 3.13vw 0;
	font-size: 1.39vw;
	line-height: 1.53vw;
	color: #49464F;
}
.content-bottom-info {
	margin: 0 0 3.19vw 0;
}
.content-bottom-info-list {
	max-width: 17.92vw;
	margin: 0 auto;
	text-align: left;
}
.content-bottom-info-list li {
	font-size: 1.39vw;
	line-height: 1.6vw;
	margin: 0 0 1.74vw 0;
	height: 2.78vw;
	color: #8172A2;
	background: url('../img/icons/ring.svg') left/auto 100% no-repeat;
	padding: 0.56vw 0 0.56vw 3.82vw;
}
.content-bottom-info-list li:last-child {
	margin: 0;
}
.content-bottom-info__link {
	display: inline-block;
	width: 12.92vw;
	height: 3.13vw;
	line-height: 3.13vw;
	border-radius: 1.67vw;
	padding: 0.90vw 0;
	background-color: #7140EB;
	color: #FBF7F3;
	font-size: 1.11vw;
	line-height: 1.32vw;
}
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Единицы измерения vw это сотые доли вьюпорта.
Когда вы пишете 50vw - это значит, что вам нужна половина вьюпорта.
При 100% масштабе блок с шириной 50vw будет занимать половину вьюпорта.
Если вы измените (увеличите) масштаб браузера, то размер вьюпорта уменьшится в пикселях. Но половина окна как визуально половиной окна была, так и останется.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы