0

Только начинаю изучать веб-языки. При уменьшении или увеличении масштаба дивы с содержимым растягиваются. Как сделать так, чтобы не растягивались, как на сайте ВК, Мвидео и прочих подобных сайтах. Пытался разобраться в кодах этих страниц, но не понял как у них все работает(

body {
    /*background-image:url("DarkFon1.2.png");*/
    background-attachment: fixed;
   } 
header {
    border-bottom: 30px solid;
    border-top: 30px solid;
    border-image: url(Fon6.png) 170 round;
    background-image:url("Fon2.png");
    background-attachment: fixed;
    /*box-shadow: 0 0 0 1px brown;*/
   } 
.content{
    overflow: hidden;
}
.left{
    margin-bottom: 20px;
    width: 5%;
    min-height: 500px;
    float: left;
}
.center{
    border-radius: 20px;
    margin-bottom: 20px;
    width: 90%;
    min-height: 500px;
    float: left;
    /*background-color: brown;*/
}
.center_left{
    border-radius: 15px;
    float: left; 
    padding: 10px;
    background-color: black;
    width: 30%;
    min-height: 900px;
    margin: 10px;
}
.center_center{
    min-height: 900px;
    width: 64.8%;
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
    float: left;
    background-color: black;
}
.right{
    margin-bottom: 20px;
    width: 5%;
    min-height: 500px;
    float: left;
}
/*-------------------------------------------PODVAL------------------------------------------*/
.podval{
    min-height:  100px;
    border-top: 30px solid;
    border-image: url(Fon6.png) 170 round;
    padding-top: 30px;
    padding-bottom: 30px;
    /*text-align: center;*/
    background-color: brown;
    color: white;
    font-size:30px;
    font-family: fantasy;
}
.KAYNE{
    color:white;
}
.Website{
    font-size: 40px;
    color: black;
}
.ssilka{
    text-decoration: none;
}
.ssilka:hover .Website{
    color: white;
}
.ssilka:hover .KAYNE{
    color: black;
}
.ssilka_kws{
    text-align: center;
    float: left;
    width: 33%;
    border-right: 1px solid white;
    border-left: 1px solid white;
}
.contacts{
    text-align: center;
    float: left;
    width: 33%;
}
.info{
    text-align: center;
    width: 33%;
    float: left;
}
.info_ssilki{
    list-style:none;
    font-size: 20px;
}

/*-------------------------------------------------------------------------------------------*/
/*-------------------------------СМЕНА ФОНА--------------------------------------------------*/
.smenfon{
    margin-top: 15px;
    transition: 1s;
    position: fixed;
    left: -150px;
    border-radius: 0px 15px 15px 0px;
    padding: 10px;
    font-size: 30px;
    padding-right: 200px;*/
    border: none;
    border-style: none;
    color: white;
    background-color: brown;
    font-family: fantasy;
    width: 150px;
    height: 100px;
    outline: none;
    text-align: left;
}
.smenfon:hover{
    left: 0px;
    border: none;
    border-style: none;
    color: white;
    background-color: indianred; 
    padding-right: 10px;
    cursor:pointer;
}
/*-------------------------------------------------------------------------------------------*/
/*--------------------------------------ЛОГОТИП СВЕРХУ СЛЕВА---------------------------------*/
.logo{
    margin: 10px;
    margin-right: 0px;
    font-family: fantasy;
    font-size: 30px;
    float: left;
}
.logo_kayne{
    color: brown;
}
.logo_website{
    font-size: 16px;
    color: black;
}
.logo_ssilka{
    text-decoration: none;
}
/*-------------------------------------------------------------------------------------------*/
.KWS{
    text-decoration: none;
    color: black;
}
* {
    margin: 0;
    padding: 0;
}
nav{
    position: sticky;
    top: 0px;
}
nav ul{
    list-style: none;/*убираем маркер*/
    background-image: url(Fon2.png);
    font-family: fantasy;
    font-size: 30px;
}
nav>ul>li{
    float: left; /*выравнивание по стороне (здесь с левой)*/
}
nav ul::after {
    content: "";
    display: block;
    clear: both;
}
nav ul li a{
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    color: brown;
}
nav ul li a:hover {
    background-color: brown;
    color: ghostwhite;
}
nav ul ul{
    display: none;
    position: absolute;
}
nav ul li:hover ul{
    display:block;
}
/*.otstup{
    padding: 5px 0px;
}*/
/*-----------------------------------РЕГИСТРАЦИЯ-------------------------------------*/
.regi{
    transform: translate(-167px) rotate(-90deg) scaleY(1.1);
    float: left;
    margin-top: 87px;
    font-size: 38px;
    letter-spacing: 2px;
    color: white;
    border-bottom: 5px solid;
}
form{
    transform: translate(-240px);
    float: right;
}
.fs1{
    transition: 0.5s linear;
    position: fixed;
    right: -545px; /* Расстояние от правого края окна браузера */
    /*top: 20%; /* Расстояние сверху */
    border-radius: 15px 0px 0px 15px;
    padding: 20px;
    padding-left: 80px;
    background-color: brown;
    margin-top: 15;
    float: right;
    font-family: fantasy;
    text-align: right;
}
.fs1:hover{
    transform: translateX(-290px);
}
div label{ 
    
    float: left;
    font-size: 40;
    color: white;
}
.knopka{
    border-radius: 5px;
    border-color:white;
    border-style: solid;
    background-color:;
    transform: translate(-50px);
    width: 150px;
    height: 30px;
}
.knopka:hover{
    background-color:forestgreen;
    border-color: forestgreen;
    color: white;
}
div input{
    border-color:white;
    border-style: solid;
    border-radius: 5px 0px 0px 5px;
    font-size: 20px;
    margin: 5px;/*задаю отступы полей ввода друг от друга*/
    width: 250px; /*устанавливаю размер полей ввода*/
    height: 35px; /*устанавливаю размер полей ввода*/
    color: black;
    background-color: white;  
    outline: none;
    transform: translateY(-5px); /*из-за изменения размера полей ввода они немного сместились вниз. Этой командой ставлю их на место*/
}
/*-----------------------------------------------------------------------------------*/
<!DOCKTYPE html>
<html>
 <title>KayneWeb</title>
 <head>
     <link href="CSS/Fon.css" rel="stylesheet" type="text/css">
     <header>
         <h1 id="header" align="center"><a href="KayneSite.html" class="KWS"><span style="font-family: fantasy; font-size:50; font-weight:200; color: brown">KAYNE</span><span style="font-family: fantasy; font-size:25; font-weight:100;">WebSite.</span></a></h1></header>
     
     <nav class="otstup">
      <div class="logo_div">
       <h1 class="logo"><a href="KayneSite.html" class="logo_ssilka"><span class="logo_kayne">KAYNE</span><span class="logo_website">WebSite.</span></a></h1>
      </div>  
      <ul>
        <li><a href="#">Месяц</a>
         <ul>
          <li><a href="#">Январь</a></li>
          <li><a href="#">Февраль</a></li>
          <li><a href="#">Март</a></li>
         </ul>
        </li> 
        <li><a href="#">Услуги</a>
         <ul>
           <li><a href="#">Код</a></li>
           <li><a href="#">Фото</a></li>
         </ul>        
        </li> 
      </ul> 
    </nav>
     
     <button class="smenfon" id='changeimage'>Сменить тему</button>
      
          <div class="fs1"> 
            <form>
             <label for="email">Логин</label><br><input type="email" name="useremail" required="required" placeholder="[email protected]"><br>
             <label for="password">Пароль</label><br><input type="password" name="userpas" required="required" placeholder="Ваш пароль"><br>
             <input class="knopka" type="submit" value="Отправить">
            </form>
              <h1 class="Regi">Регистрация</h1>
          </div>
 </head>

 <body>
     <style type="text/css">
      .box1{
         font-size: 20px;
         text-align: center;
         display: flex;
         justify-content: center;
         list-style-type: none;
         padding-left: 0;
         padding: 10px 0px;
          }
      .box1>li{
         transition: 0.1s linear;/*
         transform: translate(0px);/*задает НАЧАЛЬНОЕ смещение на нное кол-во px*/
         /*transition: background-image 0.1s 0.1s ease; /*изменяет время смены картинки*/
         border-top: 60px solid;
         border-image: url(CSS/Fon6.png) 200 round;
         margin: 0 50px;
         padding: 5px 15px;
         background-image: url(CSS/Fon2.png);
         /*box-shadow: 0 0 0 10px brown;*/
         /*box-shadow: 0 0 20px;*/
         border-radius: 0 0 30px 30px;
          }
      .box1>li:hover{
         transform: translate(0,20px);/*задает КОНЕЧНОЕ смещение на нное кол-во px*/
         /*transform: scale(1.05);/*scale() задает изменение размера элемента в нное кол-во раз*/
         /*background-image: url(CSS/DarkFon2.png);*/
         /*box-shadow: 0 0 20px brown;*/
         box-shadow:  15px 15px brown;
         }
       .li>info{
         border-image: 100 round;
         }
     </style>       
    <!--     
     <ul class="box1">
     <li><h1><span style="color: brown; font-family: fantasy; font-weight: 70; ">Контакты</span></h1>
     <a href="https://vk.com/k_kayne" target="_blank" title="Вконтакте"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/vklogo.png" width="50" hspace="10"></a>
     <a href="https://www.instagram.com/kirill_koshurov/" target="_blank" title="Инстаграм"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/Instagram.png" width="47"></a></li>
     
     <li><h1><span style="color: brown; font-family: fantasy; font-weight: 70;">Загрузки</span></h1>
     <a href="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/Анатомия.zip" target="_blank" title="Нажмите, чтобы скачать файл"><input value="Анатомия" type="button" style="font-family:fantasy;color:darkred; font-size:30; background:white"></a></li>
     
     <li><div class="info"><h1><span style="color: brown; font-family: fantasy; font-weight: 70;">Инфо</span></h1>
     <a title="[email protected]" href="mailto:[email protected]"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/Gmail-logo.png" width="70" height="50"></a></div></li>     
     </ul>-->
     <br>
    <div class="content">
     <div class="left"></div>
     <div class="center">
      <div class="center_left">левый центр</div>
      <div class="center_center">центр центр</div>
     </div>
     <div class="right"></div>
    </div>

<script language="JavaScript">
    const images = [
  'CSS/DarkFon1.3.png',
  'CSS/DarkFon2.png'
];
let current = 0;
document.getElementById('changeimage').addEventListener('click', function() {
  current = (current + 1) % images.length;
  setimage(current);
});
function setimage(x) {
  document.body.style.backgroundImage = `url('${images[x]}')`;
}
setimage(0);
    </script>
     
     <h1 align="center"><a href="#header" align="center"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/Стрелка.png" width="100" height="100"></a></h1>
     <br>
     <div class="podval">
      <div class="contacts">
       <span>Контакты:</span><br>
       <a href="https://vk.com/k_kayne" target="_blank" title="Вконтакте"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/vklogo.png" width="30" hspace="10"></a>
       <a href="https://www.instagram.com/kirill_koshurov/" target="_blank" title="Инстаграм"><img src="%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%D0%B8/Instagram.png" width="30"></a>
      </div>
      <div class="ssilka_kws">
       <h1><a class="ssilka" href="KayneSite.html"><span class="KAYNE">KAYNE</span><span class="Website">WebSite.</span></a></h1>
      </div>
      <div class="info">Инфо:
       <ul class="info_ssilki">
        <li>[email protected]</li>
       </ul>
      </div>
     </div>
     
    
 </body>
</html>

1 ответ 1

1

Чтобы содержимое не растягивалось на ваших страницах следует указывать все размерности элементов в таких единицах как %, vh, vw, em, rem, такой единицы измерения как px, если нет необходимости, лучше избегать. Подробнее об этих единицах можно спокойно найти в интернете или на youtube.
На других же сайтах уже ничего не сделаешь, какими их создали такими они и останутся. Если разработчик предусмотрел эти моменты и оптимизировал сайт, то все будет выглядеть хорошо, если нет - то, как вы и сказали, растягиваться.

Также, чтобы контролировать поведение отдельных элементов, таких как меню например, можно использовать @media:

@media (max-width: 780px) and (min-width: 481px){
     body{

      /* какие-то стили */


     }

     .element{

      /* какие-то стили */

     }
}

В данном примере, стили, которые находятся внутри @media, выполнятся только при условии (max-width: 780px) and (min-width: 481px), т.е когда ширина экрана пользователя равна(или меньше) 780px и до тех пор, пока она будет больше(или равна) 481px. Но не стоит злоупотреблять @media-запросами.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.