Имеется страница:
На ней есть несколько элементов. Лого, текст и 2 кнопки в контейнере
Как нужно сделать адаптацию под разные разрешения? Делал всё под своё, в коде всё по пикселям
<html>
<head>
<title>Test</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<meta charset="utf-8" />
<link rel="icon" href="img/favicon.ico" type="image/icon type">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<a href="index.html"><div class="logo"></div></a>
<h1 class="title">Test</h1>
<div class="container">
<button onclick="window.location.href = '#;" class="button-other" title = "Test"></button>
<button onclick="window.location.href = '#;" class="button-car-market" title = "Test"></button>
</div>
</body>
</html>
* {
margin:0;
padding:0;
}
body {
background-image: url(../img/background-new.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: #fff;
}
.logo {
position: absolute;
margin: 10px 0 0 10px;
background-image: url(https://pbs.twimg.com/profile_banners/828317711415570432/1492948555/1500x500);
width: 150px;
height: 57px;
background-position: left;
-webkit-background-size: cover;
background-size: cover;
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
h1 {
color: #fff;
}
.title {
text-align: center;
padding-top: 150px;
font-family: 'Montserrat', sans-serif;
font-size:50px;
}
.container {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin-top: 1%;
margin-right: 600px;
margin-left: 600px;
}
.button-other {
width: 326;
height: 206;
background: url(../img/doc.png) center no-repeat;
cursor: pointer;
border: none;
}
.button-car-market {
width: 256;
height: 206;
background: url(../img/car.png) center no-repeat;
cursor: pointer;
border: none;
}
Средний
