如何制作響應式菜單

Question

當頁面正在調整菜單大小並且內容比圖像減少得更快並且當頁面寬度大於圖片時在左側對齊

在 pc 網站上正常調整大小是正常的圖像沒有但是當它在 pc 上的移動或移動模式下時它是否壞了

我試過

background-size: 100% auto;
background-size: cover;

沒有任何效果所以請幫幫我我需要它謝謝

 /* font-family: 'Montserrat', sans-serif; */ body { background: #000; font-family: 'Lato', sans-serif; } header { width: 100%; background: #fff; } nav > * { list-style: none; } nav { max-width: 960px; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; padding: 10px; } ul { padding: 0; } nav > ul { display: flex; flex-direction: row; } .logo { background: url('../img/01.png') no-repeat; width: 150px; height: 50px; } .menu { display: flex; text-decoration: none; margin: 0 10px 0 10px; color: #3a3b3b; } .menu:hover { color: #d96e5d; transition: all 0.5s ease; } strong.menu { font-weight: normal; color: #d96e5d; } .top-bg { background: url('../img/topbg.jpg') no-repeat; background-size: cover; } .top-img > h1 { font-family: 'Montserrat', sans-serif; text-transform: uppercase; color: white; } .content { position: absolute; top: 800px; color: white; font-size: 80px; } @media ( max-width:500px ) { nav > ul { flex-direction: column; align-items: center; } nav { flex-direction: column; align-items: center; } .item{ padding: 10px; width: 90vw; background: #d3d0d0; margin: 2px 0 2px 0; } .menu { justify-content: center; } }

 <header> <nav> <a class="logo" href="#"></a> <ul> <li class="item"><a href="aktivity.php" class="menu">Aktivity</a></li><li class="item"><strong class="menu">Index</strong></li><li class="item"><a href="kontakt.php" class="menu">Kontakt</a></li><li class="item"><a href="onas.php" class="menu">Onas</a></li> </ul> </nav> </header> <main> <section class="topimg"> <h1>Coupe Invest</h1> <img src="assets/img/topbg.jpg" alt="background"> </section> <section class="content"> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem a et laboriosam illum recusandae nesciunt veniam architecto saepe ratione! Eaque quas provident voluptates facere consectetur repellendus amet nulla ea nisi! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur odio, quos suscipit laudantium quo doloribus nulla sit ut cupiditate mollitia nihil maiores. Vitae ipsum excepturi quibusdam nam molestias ullam! Enim. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque, ut amet laboriosam quaerat, expedita nam neque placeat molestias non hic sit voluptate quam quia beatae nulla rem est eius fugiat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi fugiat, cumque distinctio consequuntur asperiores quia veniam suscipit tenetur, nobis adipisci ad voluptate quisquam ducimus nesciunt id, voluptatem odio neque molestias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid eum adipisci quaerat ducimus pariatur natus velit voluptates! Odit amet tempora quisquam mollitia fugit aliquam neque vitae molestiae debitis aperiam?</p> </section> </main>

Answer 1

 @media (max-width: 500px) .item { width: auto; } nav > ul { flex-direction: unset; } } @media (max-width: 380px) .menu { margin: 0 5px 0 6px; font-size: 13px; } }