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

Question

В настоящее время я работаю над веб-сайтом, и мне было интересно, как я могу сделать так, чтобы моя навигационная панель не искажалась при увеличении масштаба. Например, когда я уменьшаю масштаб страницы, навигационные кнопки перемещаются далеко, когда я увеличиваю масштаб, они образуют кластер и перекрывают друг друга. Что я могу сделать, чтобы этого не произошло? Вот мой код:

HTML:

    <header>
    <div class="main">
        <div class="logo-text">
            <h1 class="text-logo">Title</h1>
        </div>
        <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>
</header>

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: 5px solid #A9A9A9;
 }

 html,
 body {
 /*  background: #000000;*/
 font-size: .80em;
 /* font-family: "Balsmiq", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;*/
 margin: 0%;
 padding: 0%;
 color: #696969;
 height: 100%;
 width: 100%;
 }

 ul {
 list-style-type: none;
 text-align: center;
 margin-top: -3.7%;
 }

 ul li {
 display: inline-block;
 margin-left: 0%;
 font-size: 170%;
 }

 ul li a {
 transition: 0.6s ease;
 text-decoration: none;
 color: #000000;
 padding: 5px 40px;
 border: 2px solid #000000;
 font-weight: 700;
 }

 ul li a:hover,
 .active {
 background-color: #000000;
 color: #ffffff;
 }

 .main {
 min-width: 300px;
 }

 .main h1 {
 padding: 1.5%;
 margin-left: 3%;
 font-family: Leckerli One;
 color: black;
 font-size: 3.1875rem;
 }

Заранее спасибо!

Answer 1

Вы можете разделить страницу на столбцы, чтобы сделать ее отзывчивой, как показано ниже:

<div class="section group">
    <div class="col span_1_of_3">
    This is column 1
    </div>
    <div class="col span_1_of_3">
    This is column 2
    </div>
    <div class="col span_1_of_3">
    This is column 3
    </div>
</div>

Вы можете использовать BootStrap. Ознакомьтесь с множеством обучающих программ.

Answer 2

Попробуйте использовать bootstrap, чтобы ваш веб-сайт реагировал на все размеры экрана. Потому что при увеличении масштаб сайта принимает именно такой размер экрана. Поэтому используйте @media, чтобы он реагировал на весь экран. Поэтому при увеличении или уменьшении масштаба он останется прежним.