带有CSS的响应式磁带

发布于 2025-02-08 14:26:41 字数 1020 浏览 3 评论 0原文

我正在尝试使用媒体查询以500px宽度的响应，而无需使用汉堡符号。我想制作“菜单” div，该div包含链接，将链接直接分成一条新的线条，当屏幕减少到500px以下的任何内容时，将其“公司名称”分解为“公司名称”。这里有人可以提供帮助吗？

#nav-bar {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  background-color: #38b000;
  color: #FFFFFF
}

.company-name {
  font-size: 32px;
  flex: 1;
}

.menu {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
  max-width: 20%;
  font-size: 18px;
  align-items: center;
}

<nav id="nav-bar">
  <h2 class="company-name" title="Return to Home Page"><a class="company-link" href="">URL Saver</a></h2>
  <div class="menu">
    <a href="" class="nav-link" href="/">Login</a>
    <a href="" class="nav-link" href="/">Logout</a>
    <a href="" class="nav-link" href="/">Profile</a>
  </div>
</nav>

原文

I am trying to make my navbar responsive at 500px width using media queries without using the hamburger sign. I want to make the "menu" div that houses the links to be broken into a new line directly under the one with the "company-name" when the screen is reduced to anything under 500px. Anyone out here that can help?

#nav-bar {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  background-color: #38b000;
  color: #FFFFFF
}

.company-name {
  font-size: 32px;
  flex: 1;
}

.menu {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
  max-width: 20%;
  font-size: 18px;
  align-items: center;
}

<nav id="nav-bar">
  <h2 class="company-name" title="Return to Home Page"><a class="company-link" href="">URL Saver</a></h2>
  <div class="menu">
    <a href="" class="nav-link" href="/">Login</a>
    <a href="" class="nav-link" href="/">Logout</a>
    <a href="" class="nav-link" href="/">Profile</a>
  </div>
</nav>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叹沉浮 2025-02-15 14:26:41

尽管问题中的更多信息总是有用的，但这似乎是按照您的要求做的。该代码在代码中的注释中说明：

/* custom CSS property: */
:root {
  --flex-direction-nav: row;
}

/* simple, naive CSS reset to minimise cross-browser issues by
   specifying the box-sizing algorithm, and removing margin and
   padding from elements: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* setting the font-size of the <body> to allow other font-sizes
     to be assigned based on the em (this is my preference, feel free
     to adjust to your own preferences): */
  font-size: 16px;
}

#nav-bar {
  display: flex;
  /* specifying the flex-direction to the value held in the custom CSS
     property-value: */
  flex-direction: var(--flex-direction-nav);
  /* assigning 'left over' space to be placed between the elements, not
     before, after and between: */
  justify-content: space-between;
  /* balancing the padding so the menu-bar looks well-proportioned and
     'balanced': */
  padding-inline: 10px;
  background-color: #38b000;
  color: #FFFFFF;
}

.company-name {
  /* 1em is 16px, 2em is 32px: */
  font-size: 2em;
  /* you had assigned a max-width of 20% to the .menu element; here I specified
     that the .company-name element should be four times larger than that '20%'
     element, which preserves the 20% while there is space but otherwise allows
     all elements to take the required space: */
  flex-grow: 4;
}

.menu {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  font-size: 1.05em;
  gap: 1em;
  /* assigning 'left over' space to be placed between the elements: */
  justify-content: space-between;
  align-items: center;
}

/* in screen media, when the max-width is 500px (or less): */
@media screen and (max-width: 500px) {
   /* we redefine the custom CSS property, which is automatically applied once it's
      changed: */
   :root {
    --flex-direction-nav: column;
  }
}

<nav id="nav-bar">
  <h2 class="company-name" title="Return to Home Page"><a class="company-link" href="">URL Saver</a></h2>
  <div class="menu">
    <a class="nav-link" href="#">Login</a>
    <a lass="nav-link" href="#">Logout</a>
    <a class="nav-link" href="#">Profile</a>
  </div>
</nav>

JS小提琴演示。

参考：

This seems to do as you require, though more information in the question is always useful; the code is explained in comments within the code:

/* custom CSS property: */
:root {
  --flex-direction-nav: row;
}

/* simple, naive CSS reset to minimise cross-browser issues by
   specifying the box-sizing algorithm, and removing margin and
   padding from elements: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* setting the font-size of the <body> to allow other font-sizes
     to be assigned based on the em (this is my preference, feel free
     to adjust to your own preferences): */
  font-size: 16px;
}

#nav-bar {
  display: flex;
  /* specifying the flex-direction to the value held in the custom CSS
     property-value: */
  flex-direction: var(--flex-direction-nav);
  /* assigning 'left over' space to be placed between the elements, not
     before, after and between: */
  justify-content: space-between;
  /* balancing the padding so the menu-bar looks well-proportioned and
     'balanced': */
  padding-inline: 10px;
  background-color: #38b000;
  color: #FFFFFF;
}

.company-name {
  /* 1em is 16px, 2em is 32px: */
  font-size: 2em;
  /* you had assigned a max-width of 20% to the .menu element; here I specified
     that the .company-name element should be four times larger than that '20%'
     element, which preserves the 20% while there is space but otherwise allows
     all elements to take the required space: */
  flex-grow: 4;
}

.menu {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  font-size: 1.05em;
  gap: 1em;
  /* assigning 'left over' space to be placed between the elements: */
  justify-content: space-between;
  align-items: center;
}

/* in screen media, when the max-width is 500px (or less): */
@media screen and (max-width: 500px) {
   /* we redefine the custom CSS property, which is automatically applied once it's
      changed: */
   :root {
    --flex-direction-nav: column;
  }
}

<nav id="nav-bar">
  <h2 class="company-name" title="Return to Home Page"><a class="company-link" href="">URL Saver</a></h2>
  <div class="menu">
    <a class="nav-link" href="#">Login</a>
    <a lass="nav-link" href="#">Logout</a>
    <a class="nav-link" href="#">Profile</a>
  </div>
</nav>

JS Fiddle demo.

References:

回复收藏 0 原文

撧情箌佬 2025-02-15 14:26:41

您可以通过针对所需大小的最大介绍所需的媒体查询来实现这一目标，如示例所示，如果浏览器的大小低于1700x，则可以将其挠性方向更改为列并将高度更改为自动。

* {
  font-size: 40px;
  margin: 0;
  padding: 0;
}

.navbar-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  background-color: gray;
}

.nav-links {
  list-style: none;
  padding: 0.5rem;
  font-family: Arial, Helvetica, sans-serif
}

@media only screen and (max-width: 1700px) {
  .navbar-nav {
    height: auto;
    flex-direction: column;
    background-color: gray;
  }
}

<body>
  <nav class="navbar">
    <ul class="navbar-nav">
      <li class="nav-links">Home</li>
      <li class="nav-links">About</li>
      <li class="nav-links">Services</li>
      <li class="nav-links">Email</li>
      <li class="nav-links">Something</li>
      <li class="nav-links">SignUp</li>
      <li class="nav-links">Login</li>
      <li class="nav-links">Loremips</li>
    </ul>
  </nav>

You can achieve that with media queries by targeting the max-with of desired-size like shown in the example if the size of the browser goes below 1700x its gonna change its flex-direction to column and change the height to auto.

* {
  font-size: 40px;
  margin: 0;
  padding: 0;
}

.navbar-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  background-color: gray;
}

.nav-links {
  list-style: none;
  padding: 0.5rem;
  font-family: Arial, Helvetica, sans-serif
}

@media only screen and (max-width: 1700px) {
  .navbar-nav {
    height: auto;
    flex-direction: column;
    background-color: gray;
  }
}

<body>
  <nav class="navbar">
    <ul class="navbar-nav">
      <li class="nav-links">Home</li>
      <li class="nav-links">About</li>
      <li class="nav-links">Services</li>
      <li class="nav-links">Email</li>
      <li class="nav-links">Something</li>
      <li class="nav-links">SignUp</li>
      <li class="nav-links">Login</li>
      <li class="nav-links">Loremips</li>
    </ul>
  </nav>

回复收藏 0 原文

书间行客 2025-02-15 14:26:41

简单的解决方案只是输入flex方向：列;在特定宽度处。然后只需进行一点CSS操纵即可使一切变得不错。

回复收藏 0 原文

流星番茄 2025-02-15 14:26:41

您需要在最后一个CSS文件中添加此媒体：

@media (max-width: 500px) {
    #nav-bar {
        flex-direction: column;
    }
    .menu {
        max-width: 35%;
    }
}

you need to add this media in the last of you css file:

@media (max-width: 500px) {
    #nav-bar {
        flex-direction: column;
    }
    .menu {
        max-width: 35%;
    }
}

回复收藏 0 原文

~没有更多了~

关于作者

娇纵

暂无简介

文章

28 人气

关注发私信

友情链接

文江博客

带有CSS的响应式磁带

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

十二

飞烟轻若梦

OPleyuhuo

wxb0109

旧城空念

-小熊_

友情链接

带有CSS的响应式磁带

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

十二

飞烟轻若梦

OPleyuhuo

wxb0109

旧城空念

-小熊_

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。