Я пытаюсь создать адаптивный сайт начальной загрузки 4. Когда размер разрешения экрана достигает среднего, мне нужно получить меню гамбургера и получить меню, совершенно отличное от рабочего стола (те же цвета, но разных размеров). Я разрабатываю этот сайт с разрешением 1080p, поэтому я думаю, что это большой размер. Я делаю все это с учетом адаптивного дизайна. Я надеялся, что все будет масштабироваться с использованием адаптивного дизайна, но, когда я уменьшу Google Chrome, мои «поля содержимого» и другие области не останутся масштабированными, это будет выглядеть совсем не так, как я хочу. Я новичок в этом, также, возможно, кто-то может порекомендовать мне некоторые инструменты веб-разработчика? Я сейчас использую Google Chrome Inspect, чтобы проверить мой CSS.
Я знаю, как получить меню гамбургера, но не могу понять, как заставить его создать новую панель навигации и снять панель навигации для экранов большего размера. Я хотел бы, чтобы кто-то указал мне сайт для этого, поскольку я не могу найти подходящий для себя.
<body>
<div style="background: #6B7A8F; width: 100vw; height: 100vh;">
<div class="container">
<ul class="nav navbar navbar-expand-md fixed-top navbar-light navbar-custom-bg justify-content-center ">
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #6B7A8F; " href="# ">MY NAME</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #F7882F; " href="# ">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #F7C331; " href="# ">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-custom-items " style="background: #DCC7AA; " href="# ">CONTACT</a>
</li>
</ul>
</div>
<div class="container" style="background: #6B7A8F; padding-top: 13%; width: 50%; height: 100vh;">
<div style="width: 100%; height: 0px; text-align: right; font-family: 'Righteous'; padding: 0px; margin: 0px;">
<h1>Greetings! </h1>
</div>
<div class="container-fluid overflow-auto " style="background: #DCC7AA; border: 20px solid #F7882F; height: 80%; margin-top: 9%; padding: 3%; color: white;">
<h2>My Heading</h2>
<!-- <div class="row ">
<div class="col "></div>
<div class="col-8 ">I'm content inside the grid!</div>
<div class="col "></div>
</div> -->
</div>
</div>
<div style="background: #F7882F; width: 100vw; height: 100vh;">
<div class="container" style="background: #F7882F; padding-top: 5%; width: 50%; height: 100vh;">
<div style="width: 100%; height: 4%; text-align: right; font-family: 'Righteous';">
<h1>What I offer:</h1>
</div>
<div class="container-fluid overflow-auto " style="background: #DCC7AA; border: 20px solid #F7C331; height: 88%; margin-top: 5%; padding: 3%; color: white;">
<h2>My Heading</h2>
<!-- <div class="row ">
<div class="col-2 "></div>
<div class="col-8 ">I'm content inside the grid!</div>
<div class="col-2 "></div>
</div> -->
</div>
</div>
</div>
</div>
Я хочу, чтобы навигационная панель масштабировалась до тех пор, пока она не достигнет среднего разрешения в начальной загрузке 4. тогда мне в основном нужно совершенно другое меню. Кроме того, мои области контента не масштабируются, как я надеюсь. - Кроме того, любопытно, если бы я использовал пиксели вместо процентов и другие «отзывчивые» элементы, как я пытаюсь сделать, будет ли использование масштаба px автоматически с начальной загрузкой 4? Или я делаю это правильно?
Спасибо!