Доброго времени суток.
Пишу свой первый код для макета. Суть в отработке базовых тегов и свойств для работы с текстом и картинками, то есть фактически в данный момент учусь читать макет и перерисовывать его как картинку, но всё же интересно было его адаптировать под все разрешения, из-за чего всем дивам, где есть фоновое изображение задал позиционирование 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;
}
Простой
