html - 如何制作响应式菜单
问题描述
当页面正在调整菜单大小并且内容减少的速度比图像快并且页面的宽度大于图片的左侧对齐时
在 pc 站点上正常调整大小是正常图像没有,但是当它在移动或 pc 上的移动模式时,它是否损坏
我试过了
background-size: 100% auto;
background-size: cover;
没有任何效果,所以请帮助我,我需要它 thx
/* 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>
解决方案
@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;
}
}
推荐阅读
- javascript - 使用 axios 从 REST 端点获取 JSON - ReactJS
- javascript - 尝试从我自己的 API 获取数据时出现“未定义”
- python - 根据第 90 个百分位数内的值过滤掉数据框
- c++ - Concert 技术中的决策变量声明(c++ 和 cplex)
- haskell - Haskell 在防止缓冲区溢出方面有多安全?
- firebase - 如何仅授予管理员帐户访问权限以创建新帐户,而不是在创建新帐户后将其注销?
- javascript - 使用 JSDoc 从另一个模块引用 @class
- java - 如何使用 LSP4J 在 Java 中重用现有的语言服务器 (LSP)
- microsoft-graph-api - 扩展属性和扩展属性有什么区别
- google-apps-script - Apple 中的 dopost(e) 功能问题