[英]Menubar doesn't scale to screen size
I got one line menubar at the very top of the screen.我在屏幕的最顶部有一行菜单栏。
However, it seems not fitting to the size of the monitor.但是,它似乎不适合显示器的尺寸。
body { background: #5A452E; }.menuWrapper { display: flex; margin: 0; padding: 0; z-index: 10; border-bottom: 1.5px solid white; height: 80px; background: transparent; align-items: flex-start; }.menuWrapper>* { display: flex; text-align: center; box-sizing: border-box; font-family: 'Source Serif Pro', serif; }.menuWrapper.mainMenu { width: 43vw; min-width: 600px; max-width: 50vw; }.mainMenu ul, .loginArea.loginMenu ul { padding: 0; margin: 0; display: flex; align-items: flex-start; vertical-align: middle; }.mainMenu ul li { align-self: flex-start; list-style: none; text-align: center; padding: 38px; line-height: 1px; }.mainMenu a { text-decoration: none; color: white; transition: all 0.5s linear; }.mainMenu a:hover { color: #F3D798; transition: all 0.5s linear; }.logoArea { width: 10%; min-width: 130px; height: 100%; text-align: center; margin: 0; display: flex; align-items: center; }.logoArea img { width: 80px; height: 60px; margin: auto; display: block; }.loginArea { width: 45vw; }.loginArea.infoArea { width: 60%; min-width: 400px; }.loginArea.loginMenu { width: 40%; min-width: 200px; float: right; text-align: right; }.loginArea.loginMenu ul { display: flex; justify-content: flex-end; }.loginArea.loginMenu ul li { list-style-type: none; text-align: center; padding: 38px 15px; line-height: 1px; }.loginArea.loginMenu ul li a { text-decoration: none; color: white; transition: all 0.5s linear; }.loginArea.loginMenu a:hover { color: #F3D798; transition: all 0.5s linear; }
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300;400;600&display=swap" rel="stylesheet"> <div class="menuWrapper"> <div class="mainMenu"> <ul> <li><a href="#">STORE</a></li> <li><a href="#">CLASS</a></li> <li><a href="#">CAFE</a></li> <li><a href="#">PLAY GROUND</a></li> </ul> </div> <div class="logoArea"> <img src="../resources/images/img_common/logo-lahol2.png"> </div> <div class="loginArea"> <div class="infoArea"> </div> <div class="loginMenu"> <ul> <li><a href="#">SIGN IN</a></li> <li><a href="#">SIGN UP</a></li> </ul> </div> </div> </div>
Man(or Girl),男人(或女孩),
Your code is a complete mess(not really).你的代码是一团糟(不是真的)。 You didn't follow the common rules, which is the main reason of your problem.
你没有遵循共同的规则,这是你问题的主要原因。
First of all, you didn't use any css reset(ask google 'bout this).首先,你没有使用任何 css 重置(问谷歌'关于这个)。 Well, many people don't use reset but it's important for cross browser-y things.
好吧,很多人不使用重置,但它对于跨浏览器的东西很重要。
Second, you used vw
in width, while it's not a problem, many people avoid using it in responsive web design.其次,您在宽度上使用了
vw
,虽然这不是问题,但很多人避免在响应式 web 设计中使用它。 Try to use 'percentages' based calculations in fluid layout, instead of vw
.尝试在流体布局中使用基于“百分比”的计算,而不是
vw
。
Third, you messed a bit with flex
, I can't explain what mess, but please consider studying more about flex
, it's very important in responsive web design.第三,你对
flex
有点乱,我无法解释什么乱七八糟,但请考虑更多地研究flex
,它在响应式 web 设计中非常重要。 CSS-tricks is a good resource for explanation. CSS-tricks 是一个很好的解释资源。
Anyway, while I couldn't completely solve your problem, I have found a solution - overflow
.无论如何,虽然我无法完全解决您的问题,但我找到了解决方案 -
overflow
。 Take a look -看一看 -
* { box-sizing: border-box; } body { background: #5A452E; }.menuWrapper { display: flex; margin: 0; padding: 0; z-index: 10; height: 80px; text-align: center; box-sizing: border-box; font-family: 'Source Serif Pro', serif; border-bottom: 1.5px solid white; background: transparent; /* align-items: flex-start; */ } /*.menuWrapper>* { } */ /*.menuWrapper - don't do this unless there are multiple.mainMemu, it only complicates the code, nothing more. Browser will catch.mainMeu anyway. Only add.menuWrapper for readability purpose. */.mainMenu { /* PART 1 */ width: 43vw; min-width: 600px; max-width: 50vw; }.mainMenu ul, .loginArea.loginMenu ul { padding: 0; margin: 0; display: flex; /* align-items: flex-start; */ /* vertical-align: middle; */ }.mainMenu ul li { align-self: flex-start; list-style: none; text-align: center; padding: 38px; line-height: 1px; }.mainMenu a { text-decoration: none; color: white; /* transition: all 0.5s linear; - this line is useless. Hovering will work anyway in a:hover state, not here. Don't try to do this when hovering something. */ }.mainMenu a:hover { color: #F3D798; transition: all 0.5s linear; }.logoArea { /* PART 2 */ /* height: 100%; - no impact at all. Every element has a height of 100%, by default */ width: 10%; /* min-width: 130px; Consider removing this. After commenting out this line, the overflown width reduced a bit, LOL*/ text-align: center; margin: 0; display: flex; align-items: center; }.logoArea img { width: 80px; height: 60px; margin: auto; display: block; }.loginArea { /* PART 3 */ width: 45vw; overflow: hidden; /* I added a overflow here */ }.loginArea.infoArea { width: 60%; min-width: 400px; }.loginArea.loginMenu { width: 40%; min-width: 200px; float: right; text-align: right; }.loginArea.loginMenu ul { display: flex; justify-content: flex-end; }.loginArea.loginMenu ul li { list-style-type: none; text-align: center; padding: 38px 15px; line-height: 1px; }.loginArea.loginMenu ul li a /* well, a long line of selector here I see. If you have time, take a look here: https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left/5813672#5813672 */ { text-decoration: none; color: white; /* transition: all 0.5s linear; */ }.loginArea.loginMenu a:hover { color: #F3D798; transition: all 0.5s linear; }
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300;400;600&display=swap" rel="stylesheet"> <div class="menuWrapper"> <div class="mainMenu"> <ul> <li><a href="#">STORE</a></li> <li><a href="#">CLASS</a></li> <li><a href="#">CAFE</a></li> <li><a href="#">PLAY GROUND</a></li> </ul> </div> <div class="logoArea"> <img src="../resources/images/img_common/logo-lahol2.png"> </div> <div class="loginArea"> <div class="infoArea"> </div> <div class="loginMenu"> <ul> <li><a href="#">SIGN IN</a></li> <li><a href="#">SIGN UP</a></li> </ul> </div> </div> </div>
Now, the problem with overflow: hidden
is, when you shrink your screen too much, the .loginArea
disappear;现在,
overflow: hidden
的问题是,当您将屏幕缩小太多时, .loginArea
消失; not really, because of overflow's hidden
property, it makes the .loginArea
hidden.不是真的,因为溢出的
hidden
属性,它使.loginArea
隐藏。
But at least, it solves our problem - horizontal scrolling, right?但至少,它解决了我们的问题——水平滚动,对吧?
Just add a @media
query after 880px
.只需在
880px
之后添加一个@media
查询。 That's the breakpoint of your design, because when you shrink more after 880px
, .loginArea
got hidden.那是你设计的断点,因为当你在
880px
之后缩小更多时, .loginArea
被隐藏了。 Using media query will pull everything vertically, essentially for mobile & tablet view.使用媒体查询将垂直拉动所有内容,主要用于移动和平板电脑视图。
I tried to add the @media
query but because of your mess, I was having a hard time to make everything working.我尝试添加
@media
查询,但由于您的混乱,我很难让一切正常工作。 Never mind.没关系。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.