Как сделать так, чтобы мой сайт не искажался при увеличении и уменьшении масштаба?

Question

В настоящее время я работаю над веб-сайтом, и мне было интересно, как я могу сделать так, чтобы мой веб-сайт не искажался при увеличении и уменьшении масштаба. При масштабировании на 150% все кнопки навигации сгруппированы, что приведет к их наложению друг на друга. Я пробовал использовать теги мультимедиа, которые, как оказалось, хорошо работают с другими устройствами, однако, похоже, они не работают при увеличении и уменьшении масштаба. (ПРИМЕЧАНИЕ: это мой первый веб-сайт, поэтому вы не можете понять мою путаницу). Вот мой код:

HTML & CSS:

*{
  margin: auto;
  padding: auto;
  box - sizing: border - box;
  font - family: Century Gothic;
}

header {
  height: 15 % ;
  background - size: cover;
  background - position: center;
  background - color: #ebebeb;
  border - bottom: 5 px solid# A9A9A9;
}

@media(min - width: 768 px) and(max - width: 991 px) {
  header {
    height: 8 % ;
  }
}

@media(min - width: 768 px) and(max - width: 1199 px) {
  header {
    height: 13.5 % ;
  }
}

@media(min - width: 960 px) and(max - width: 1400 px) {
  header {
    height: 11.5 % ;
  }
}
html,
body {
  /*  background: #000000;*/
  font - size: .80e m;
  /* font-family: "Balsmiq", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;*/
  margin: 0 % ;
  padding: 0 % ;
  color: #696969;
    height: 100%;
    width: 100%;
    }

    /*Carousel*/

    .carousel-container {
    width: 70%;
    max-height: 800px;
    margin: auto;
    margin-top: 1%;
    overflow: hidden;
    border: 5px solid white;
    }

    .carousel-slide {
    display: flex;
    width: 100%;
    height: 400px;
    }

    # prevBtn {
    position: absolute;
    top: 40 % ;
    z - index: 10;
    left: 20 % ;
    font - size: 50 px;
    color: white;
    opacity: 0.5;
    cursor: pointer;
  }

  #
  prevBtn: hover {
    color: black;
  }

  #
  nextBtn {
    position: absolute;
    top: 40 % ;
    z - index: 10;
    right: 20 % ;
    font - size: 50 px;
    color: white;
    opacity: 0.5;
    cursor: pointer;
  }

  #
  nextBtn: hover {
    color: black;
  }

<header>
  <div class="main">
    <div class="logo-text">
      <h1 class="text-logo">TITLE</h1>
    </div>
    <div class="menu-container">
      <nav>
        <ul>
          <li><a href="index.html" class="active">Home</a></li>
          <li><a href="store.html">Store</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </nav>
  </div>
  </div>
</header>
<div class="page-wrapper">

  <!--Image Slider-->

  <div class="back-color">
    <div class="carousel-container">
      <i class="fa fa-angle-left" id="prevBtn"></i>
      <i class="fa fa-angle-right" id="nextBtn"></i>
      <div class="carousel-slide">
        <img src="./img/testpic3.jpg" id="lastClone" alt="Could not load">
        <img src="./img/testpic1.jpg" id="first" alt="Could not load">
        <img src="./img/testpic2.jpg" alt="Could not load">
        <img src="./img/testpic3.jpg" id="last" alt="Could not load">
        <img src="./img/testpic1.jpg" id="firstClone" alt="Could not load">
      </div>
    </div>
  </div>

Я добавил ползунок изображения потому, что он тоже искажается. Когда я уменьшаю масштаб, вы можете просматривать другие изображения, которые я скрыл.

Любая помощь будет полезна. Заранее спасибо!

Answer 1

Я думаю, что проблема этого масштабирования заключается в том, что вы указали размеры в процентах, из-за чего ваши элементы изменяются в соответствии с неопределенными размерами. Если вы будете использовать px или vw, проблема будет решена ... VW и VH также являются процентами, но у них есть соотношение с размерами порта просмотра, что не позволяет им искажать свои формы при увеличении. Это мой взгляд на это!

% относятся к родительским элементам, в то время как vw и vh относятся к порту просмотра.

Проверьте эту ссылку для получения дополнительной информации info