0

столкнулся с такой проблемой, что при одинаковом разрешении (в моем случае 1920х1080) но на разного размера экранах сайт отображается по разному (на меньшем неправильно - появляется полоса )(см. фото). Как это исправить и от чего оно идёт?

html:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <div class="flex-container15">
      <div style="margin: auto;">
        <p>068 831-95-69</p>
        <p>050 824-61-74</p>
        <p>063 676-53-59</p>
        <p>044 334-31-80</p>
        <p>г.Киев, ул.Борщаговская, 152а</p>
        <p>Правый берег</p>
        <p>г.Киев, Харьковское шоссе,55</p>
        <p>Левый берег</p>
        <p>пн-пт: 09:00–18:00</p>
        <p>сб-вс: выходной</p>
      </div>
      <div style="margin: auto;"> <!-- верхняя панель -->
         <a href="index.html"><img style="margin: auto;" class="logo_img" src="img/logo.png" alt=""></a>
        </div>
        <div style="text-align: center;">
          <p>Заполнив форму заказа в не</p>
          <p>рабочее время офиса. Вы</p>
          <p>получаете дополнительно</p>
          <p>Скидку 7%</p>
        <div class="flex-container1166">
          <input type="text">
          <input type="text">
          <input type="text">
          <button>klass</button>
        </div>
        </div>
      </div>
      <hr>
        <div class="flex-container2" id="header_top"> <!-- панель навигации -->
            <div><a href="index.html">Головна</a></div>
            <div><a href="works.html">Наші роботи</a></div>
            <div><a href="sales.html">Акції</a></div>
            <div><a href="reviews.html">Відгуки</a></div>
            <div><a href="contacts.html">Контакти</a></div>
        </div>
        <hr>
    </header>
  <div class="line"></div>
        <div style="margin: auto; text-align: center;"> <!-- главный центральный текст -->
            <h1>Металопластикові вікна, двері, перегородки у Києві та передмісті</h1>
            <h1>Балкон під ключ</h1>
            <h1>Пряма доставка з виробництва безкоштовно в Києві та передмісті</h1>
            <p>Наша команда виготовляє, доставляє і встановлює металопластикові вікна та алюмінієві конструкції різного рівня складності:</p>
            <p>від вікон або дверей на балкон, до фасадних, офісних і торгових перегородок, тамбурів і веранд.</p>
            <p>Скління будинків, квартир, котеджів і дач</p>
        </div>
        <div style="width: 100%">
        <div class="flex-container" style="margin: auto;" > <!-- типы продукции -->
           <div class="specialize-cards">
            <div class="flex-container" style="margin: auto;" >
              <div style="margin: auto;">
                <h1 style="text-align: center;"><a href="dom.html">Засклити будинок</a></h1>
                <a href="dom.html"><img alt="" src="img/dom.jpg"></a>
              </div>
              <div style="margin: auto;">
                <h1 style="text-align: center;"><a href="teracce.html">Засклити терасу</a></h1>
                <a href="teracce.html"><img alt="" src="img/teracce.jpg"></a>
              </div>    
          </div>
        <div class="flex-container" style="margin: auto;" >
          <div style="margin: auto;">
            <h1 style="text-align: center;"><a href="kvartira.html">Засклити квартиру</a></h1>
            <a href="kvartira.html"><img alt="" src="img/kvartira.jpg"></a>
          </div>
          <div style="margin: auto;">
            <h1 style="text-align: center;"><a href="balconyonkey.html">Балкон під ключ</a></h1>
            <a href="balconyonkey.html"><img alt="" src="img/balconyonkey.jpg"></a>
          </div>    
      </div>
      <div class="flex-container" style="margin: auto;" >
        <div style="margin: auto;">
          <h1 style="text-align: center;"><a href="peregorodki.html">Перегородки</a></h1>
          <a href="peregorodki.html"><img alt="" src="img/peregorodki.jpg"></a>
        </div>
        <div style="margin: auto;">
          <h1 style="text-align: center;"><a href="tambur.html">Засклити тамбур, ганок</a></h1>
          <a href="tambur.html"><img alt="" src="img/tambur.jpg"></a>
        </div>    
    </div>
    <div class="flex-container" style="margin: auto;" >
      <div style="margin: auto;">
        <h1 style="text-align: center;"><a href="mp-door.html">Металопластикові двері</a></h1>
        <a href="mp-door.html"><img alt="" src="img/mp-door.jpg"></a>
      </div>
      <div style="margin: auto;">
        <h1 style="text-align: center;"><a href="mp-okna.html">Металопластикові вікна</a></h1>
          <a href="mp-okna.html"><img alt="" src="img/mp-okna.jpg"></a>
      </div>      
  </div>
</div>
</div>
</div>
</div>
  <script src="script.js"></script>   
</body>
</html>

css:

    .flex-container {
          display: flex;
          background-color: #FAFAFA;
        }
        
        .flex-container > div {
          background-color: #FAFAFA;
          margin: 10px;
          padding: 20px;
          font-size: 30px;
          margin-left: auto;
          margin-right: auto;
        }
        .flex-container2 {
          display: flex;
          background-color: #FAFAFA;
        }
        
        .flex-container2 > div {
          background-color: #FAFAFA;
          margin: 10px;
          padding: 20px;
          font-size: 30px;
          margin-left: auto;
          margin-right: auto;
        }
        .flex-container15 {
          display: flex;
          background-color: #FAFAFA;
        }
        
        .flex-container15 > div {
          background-color: #FAFAFA;
          margin: 10px;
          padding: 20px;
          font-size: 30px;
          margin-left: auto;
          margin-right: auto;
        }
        .flex-container3 {
          display: flex;
          background-color: #FAFAFA;
          
        }
        .flex-container3 > div {
          background-color: #FAFAFA;
          margin: 10px;
          padding: 20px;
          font-size: 30px;
        }
        .flex-container1166 {
          display: flex;
          background-color: #FAFAFA;
          flex-direction: column;
        }
        .flex-container1166 > div {
          background-color: #FAFAFA;
          margin: 10px;
          padding: 20px;
          font-size: 30px;
        }
        .contact-flex {
          display: flex;
          background-color: #FAFAFA;
          flex-direction: column;
        }
        .contact-flex > div {
          background-color: #FAFAFA;
          margin: 10px;
          font-size: 30px;
        }
        .sticky {
          position: fixed;
          top: 0;
          width: 100%
        }
        .sticky + .content {
          padding-top: 102px;
        }

        @font-face {
font-family: "Montserrat";  
src: url("fonts/Montserrat-SemiBold.ttf") format("truetype"); 
font-style: normal; 
font-weight: normal;
 }
@font-face{
font-family: "Monserrato";
src: url("fonts/Montserrat-Medium.ttf") format("truetype");
font-style: normal; 
font-weight: normal; 
}
h1{
font-family: "Montserrat";
}
h2{
font-family: "Montserrat";
}
h3{
font-family: "Montserrat";
}
h4{
  font-family: "Montserrat";
  }
h5{
    font-family: "Montserrat";
    }
p{
font-family: "Monserrato";
font-size: large;
}
li{
font-family: "Monserrato";
font-size: large;
}
a{
font-family: "Monserrato";
}
body{
  background-color: #FAFAFA;
}
.logo_img{
  display: block;
    margin-left: auto;
    margin-right: auto;
}
.padding-text{
  padding-bottom: 10px;
}
.links{
  text-decoration: underline;
  font-weight: bold;
}
A {
    color: black;
    text-decoration: none;
   } 
#content {
    padding: 10px;
    background: #FAFAFA;
   }
   hr {
    border: none;
    background-color: #FAFAFA;
    height: 75px;
    padding: 0px;
   }
   .container {
    display: flex;
    flex-direction: column;
  }
  hr {
   border: none;
   background-color: black;
   height: 2px;
  }


  @media only screen and (max-width: 480px) {

    .flex-container {
      display: flex;
      flex-direction: column;
      margin-right: 100%;
      justify-content: space-between;
      }
     html{
      width: 900px;
     }
  }

  @media only screen and (max-width: 320px) {

    .flex-container {
      display: flex;
      flex-direction: column;
      margin-right: 100%;
      justify-content: space-between;

      }
      html{
        width: 950px;
      }
  }

  @media only screen and (max-width: 768px) {

    .flex-container {
      display: flex;
      flex-direction: column;
      margin-right: 100%;
      justify-content: space-between;
      }
    html{
      width: 900px;
    }
  }

  @media only screen and (max-width: 1200px) {

    .flex-container {
      display: flex;
      flex-direction: column;
      margin-right: 100%;
      justify-content: space-between;
      }

  }

Там в ксс немножечко лишнего, не обращайте внимания)

правильное отображение (фуллхд, 22 дюйма)

НЕ правильное отображение (фуллхд, 15.6 дюймов

5
  • На первый взгляд, это треш какой-то, выкладывать фотки с экрана монитора, лол. Я не думаю, что кто то будет детально в этом разбираться, но от себя хочу сказать, что проблема в адаптивной верстке.
    – Max Watson
    31 окт 2021 в 20:36
  • А в чем проблема собсна? Наглядно показал различия на разных устройствах. Могу, конечно, и скриншоты показать но толку от того будет меньше. 31 окт 2021 в 20:41
  • Может на маленьком стоит масштаб больше у экрана.
    – SLideR11
    1 ноя 2021 в 0:08
  • Масштаб одинаковый (100%) 1 ноя 2021 в 10:43
  • Ширина html у Вас указана в пикселях, в принципе результат соответствует вашему коду. У айфонов с шириной 1000+px а шириной вьюпорта 360px будет горизонтальный скролл так как вы указали ширину 900px для них
    – Greg--
    2 ноя 2021 в 11:50

1 ответ 1

0

Дело в том, что разные экраны имеют разную плотность пикселей при (возможно) одинаковом разрешении. Поэтому, когда вы задаёте ширину или высоту в пикселях, то по сути вы задаёте фактические размеры. Именно поэтому какой-нибудь блок с шириной в 1000px на телефонах с разрешением 2К+ будет вылазить за границы.

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

Пример.

/* Выводит по одному .flex-item в ряд на экранах с реальным разрешением до 576px */
@media screen and (max-width: 576px) {
    .flex-container {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-item {
        width: 100%;
    }
    
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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