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;
}
}

如何制作响应式菜单

1 个答案: