我尝试使用Flexbox使页眉具有响应性,但我希望添加自定义填充,同时仍保持响应性,即在较小的屏幕上填充应该变小等
下面是我的代码:我希望每个项目都有不同的左右填充,屏幕越小,填充应该越小,就像Flex的默认操作方式一样
<nav class="menu-bar">
<a href="#" class="logo-header"><img src="" alt="logo" /></a>
<a href="services.html" ; class="Nav-bar" id="Services">Services</a>
<a href="#" ; class="Nav-bar" id="Tools">Tools & Resources</a>
<a href="#" ; class="Nav-bar" id="About">About</a>
<a href="#" class="Nav-bar" id="pop">Contact</a>
<a href="index.html"; class="Nav-bar"><button onclick="window.location.href='index.html';" class="quote">Client Login</button></a>
</nav>
.menu-bar {
width: 100%;
background: #161B21 0% 0% no-repeat padding-box;
box-shadow: 0rem 1.125rem 0.813rem #00000029;
opacity: 1;
position: fixed;
z-index: 10;
display: -webkit-box;
display: flex;
justify-content: space-around;
-webkit-box-align: center;
align-items: center;
}
.Nav-bar {
font: normal normal normal 1.625rem Poppins;
padding-top: 86px;
padding-bottom: 65px;
letter-spacing: 0rem;
color: #ABAAAA;
opacity: 1;
text-decoration: none;
}
.Nav-bar:nth-of-type(n+3) {
-webkit-box-ordinal-group: 3;
order: 2;
}
.Nav-bar:hover {
color: #F4A950;
}
.logo-header {
width: 382px;
height: 73px;
-webkit-box-ordinal-group: 2;
order: 1;
}
1条答案
按热度按时间bf1o4zei1#
要使任何大小与视口宽度成比例,请使用vw单位,如下所示:
如果你发现在小屏幕上东西太小了,那么计算出你想要的最小像素大小,然后使用
max()
表达式将它与你的vw
大小结合起来:下面是一段代码片段:
一个二个一个一个