@myaurizio

Как сделать адаптивным страницу?

Здравствуйте, подскажите как сделать чтобы страница на всех мониторах открывалась в зоне видимости, без прокрутки? А так же две кнопки не съезжали не разных мониторах.
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link href="css/reset.css" type="text/css" rel="stylesheet"></link>
    <link href="css/style.css" type="text/css" rel="stylesheet"></link>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" >
    <script src="js/jquery.js"></script>
    
    <script type="js/bootstrap.js"></script>
  </head>
  <body>
  <style>
	@font-face{
font-family: 'bukva';
src: url('fonts/bukva.ttf');
}
  </style>
    <div class="wrapper col-md-12">
	
  <div class="button col-dm-12">
        <div class="button1 col-md-6">
          <a href="lesson1.html">
            <h2>Кнопка</h2>
            <h3>1</h3>
          </a>
        </div>
        <div class="button2 col-dm-6">
          <a href="lesson2.html">
            <h2>Кнопка</h2>
            <h3>2</h3>
          </a>
        </div>
  
     </div>
  </div>

  </body>
</html>

@font-face{
font-family: 'bukva';
src: url('../fonts/bukva.ttf');
}
div.wrapper {
	background-image: url('../img/bg.jpg');
	background-position: top center;
    background-size: 100%;
    width: 1280px;
    height: 905px;
    
    margin: auto;
    text-align:center;
    background-repeat: no-repeat;

}

.button {
	
    padding-top: 350px;
    width: 100%;
}
.button a {
	color: #fff;
}
.button1 {
   float: left;
    
    padding-left: 77px;
    
}
.button1 h2, .button1 h3 {
	font-size:3rem;
	text-align: center;
}
.button2 h2, .button2 h3 {
    font-size:3rem;
    text-align: center;
}
.button2 {
	float: right;
    padding-right: 16px;
    padding-top: 70px;
}
.button1:hover {
	
}
.button1 a {

}
 .button2 h2, .button2 h3 {
 	
 	text-align: center;
 }
 .button2 a {
 
 }
@media screen and (max-width: 1280px) {
	div.wrapper {background-size: 100%;}

@media screen and (max-width: 1024px) {
	div.wrapper {background-size: 820px;height:632px;}
	.button {
    padding-top:222px;
}
.button2 {
   padding-right: 113px;
    padding-top: 44px;
}
.button1 h2, .button2 h2 {font-size:1.5rem;}
.button h3 {font-size:2.5rem;}
	}

Пока такой вариант реализовал, подскажите более правильное и изящное решение.
  • Вопрос задан
  • 247 просмотров
Пригласить эксперта
Ответы на вопрос 1
KR1470R
@KR1470R
Backend | Frontend | Python | Godot Developer
пора бы уже научиться гуглить. На.
Ответ написан
Ваш ответ на вопрос

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

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